vue中vue-schart(图表组件)的使用

安装

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});
    }
}

后台框架地址：

https://github.com/lin-xin/vue-manage-system