安装

npm install vue-schart -S

在vue组件中使用

import Schart from 'vue-schart'

注册该组件

components:{Schart}

在template标签中使用

<schart :canvasId="canvasId" :type="type" :width="width" :data="data" :options="options"></schart>

图表中的数据

// bar表示的是柱状图//只能使用name和value。name为坐标的标识，value为当前数据的数量data(){return {canvasId: 'myCanvas',type: 'bar',width: 600,height: 500,data: [{name: '这'，value: 1},{name: '是'，value: 2},{name: '一'，value: 3},{name: '个'，value: 4},{name: '例'，value: 5},{name: '子'，value: 6}],//可选参数options: {title: 'Total sales of stores in recent years'}}}

数据响应

数据变化时，重新渲染图表

methods: {changeData(){// 整个 data 被重新赋值时this.data = [{name:'短袖', value:1200},{name:'休闲裤', value:1222},{name:'连衣裙', value:1283},{name:'外套', value:1314}];// data 里一个属性值被修改时this.$set(this.data, 1, {name:'短裙',value:500});}}

后台框架地址：

/lin-xin/vue-manage-system