vue-schart ： vue.js 的图表组件

2019年8月25日 216次阅读 来源: linshuai

引见

vue-schart 是运用vue.js封装了sChart.js图表库的一个小组件。支撑vue.js 1.x & 2.x

sChart.js 作为一个小型简朴的图表库，没有过量的图表范例，只包含了柱状图、折线图、饼状图和环形图四种基础的图表。麻雀虽小，五脏俱全。sChart.js 基础能够满足这四种图表的需求。而它的小，体现在它的体积上，代码只要 8kb，假如经由服务器的Gzip紧缩，那就更小了，因而不必忧郁形成项目代码冗余。

该库运用 canvas 完成，兼容 IE9 以上浏览器。

结果

《vue-schart ： vue.js 的图表组件》

运用指南

装置:

npm install vue-schart -S

在vue组件中运用:

<template>
    <div id="app">
        <schart :canvasId="canvasId"
            :type="type"
            :width="width"
            :height="height"
            :data="data"
            :options="options"
        ></schart>
    </div>
</template>
<script>
import Schart from 'vue-schart';
export default {
    data() {
        return {
            canvasId: 'myCanvas',
            type: 'bar',
            width: 500,
            height: 400,
            data: [
                {name: '2014', value: 1342},
                {name: '2015', value: 2123},
                {name: '2016', value: 1654},
                {name: '2017', value: 1795},
            ],
            options: {
                title: 'Total sales of stores in recent years'
            }
        }
    },
    components:{
        Schart
    }
}
</script>

运用

vue-manage-system 背景框架中运用了 vue-schart 组件，体积小，加载快。

演示地点：http://blog.gdfengshuo.com/ex…

更多文章：lin-xin/blog

微信赞扬

《vue-schart ： vue.js 的图表组件》

    原文作者：linshuai
    原文地址: https://segmentfault.com/a/1190000009817435
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞