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

vue-schart 是使用vue.js封装了sChart.js图表库的一个小组件。支持vue.js 1.x & 2.x仓库地址：https://github.com/lin-xin/vue-schartsChart.js 作为一个小型简单的图表库，没有过多的图表类型，只包含了柱状图、折线图、饼状图和环形图四种基本的图表。麻雀虽小，五脏俱全。sChart.js 基本可以满足这四

zhangwenwu的前端小站

3375人浏览 · 2017-08-16 12:01:25

zhangwenwu的前端小站 · 2017-08-16 12:01:25 发布

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

仓库地址：https://github.com/lin-xin/vue-schart

sChart.js 作为一个小型简单的图表库，没有过多的图表类型，只包含了柱状图、折线图、饼状图和环形图四种基本的图表。麻雀虽小，五脏俱全。sChart.js 基本可以满足这四种图表的需求。而它的小，体现在它的体积上，代码只有 8kb，如果经过服务器的Gzip压缩，那就更小了，因此不用担心造成项目代码冗余。

该库使用 canvas 实现，兼容 IE9 以上浏览器。

仓库地址：https://github.com/lin-xin/sChart.js
文档(中英文)：open.omwteam.com/sChart
演示地址：open.omwteam.com/sChart/demo.html

效果

demo

使用指南

安装:

1	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-schart 组件会监听数据变化重新渲染，包括 data、options、type、width 和 height。

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

当 changeData 方法被调用时，data 会被修改，图表则会重新渲染。（修改其他属性的方法一样）

应用

vue-manage-system 后台框架中应用了 vue-schart 组件，体积小，加载快。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^