vue-schart一个简单的小型图表库

支持vue1和vue2，可生成柱状图、折线图、饼状图、环形图，简单好用

[npm地址](vue-schart - npm (npmjs.com))

中文文档

安装

npm i vue-schart

引入

import Schart from 'vue-schart';

注册

components: {
	Schart
},

在template标签中使用

<schart class="wrapper" canvasId="canvas" :options="options" />

在data中设置options的数据

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]
        }
    ]
}

css给图表一个宽高

.wrapper{
    width: 600px;
    height: 400px;
}

最后效果显示

通过对参数的配置，可以更加自定义化我们的图表，中文文档中有非常详细的使用介绍