vue-schart ： vue.js 的图表组件_vue-schart官网-优快云博客

vue-schart是一款基于vue.js封装的轻量级图表库sChart.js的组件，支持柱状图、折线图、饼图和环形图，体积小巧仅8KB，适用于IE9及以上浏览器。通过简单的API即可在Vue项目中快速集成图表功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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