use-echart v1.0.1

vue-schart

:bar_chart: Vue.js wrapper for sChart.js

Support for use at the mobile. Support vue.js 1.x & 2.x & 3.x

Usage

Install:

npm install use-echart -S

Use in component:

<template>
    <div id="app">
        <use-echart class="wrapper" :options="options" />
    </div>
</template>
<script>
	import useEchart from 'use-echart';
	export default {
		data() {
			return {
				options: {
					type: "bar",
					title: {
						text: "最近一周各品类销售图"
					},
					bgColor: "#fbfbfb",
					labels: ["周一", "周二", "周三", "周四", "周五"],
					datasets: [
						{
							label: "家电",
							fillColor: "rgba(241, 49, 74, 0.5)",
							data: [234, 278, 270, 190, 230]
						},
						{
							label: "百货",
							data: [164, 178, 190, 135, 160]
						},
						{
							label: "食品",
							data: [144, 198, 150, 235, 120]
						}
					]
				}
			}
		},
		components:{
			use-echart
		}
	}
</script>

<style>
.wrapper{
	width: 7rem;
	height: 5rem;
}
</style>

Options

Refer to the documentation for sChart.js.

License

MIT license.