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>
