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>
复制代码