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

vue-schart 是使用vue.js封装了sChart.js图表库的一个小组件

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

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

效果

使用指南

安装：npm install vue-schart -S

在vue组件中使用

图表类型： type

bar 条形图； line 线型图；pie 扇形图； ring 环形图

代码：

  <!-- 柱形图 -->
  <div class="stripChart">
    <schart class="wrapper" :canvasId="canvasId" :type="type" :data="data" :options="options"></schart>
  </div>
</template>

<script>
import Schart from "vue-schart";
export default {
  components: {
    Schart
  },
  name: "line",
  data() {
    return {
      canvasId: "stripChart",
      type: "bar",
      data: [
        { name: "2014", value: 123 },
        { name: "2015", value: 456 },
        { name: "2016", value: 789 },
        { name: "2017", value: 456 },
        { name: "2018", value: 123 },
        { name: "2019", value: 156 }
      ],
      options: {
        title: "柱形图"
      }
    };
  }
};
</script>
<style>
.stripChart {
  height: 80%;
  display: inline-block;
  margin: 10px;
}
.wrapper {
  width: 500px;
  height: 300px;
}
</style>
<style scoped>
</style>
复制代码

转载于:https://juejin.im/post/5c887500f265da2db542756a