引见
vue-schart 是运用vue.js封装了sChart.js图表库的一个小组件。支撑vue.js 1.x & 2.x
sChart.js 作为一个小型简朴的图表库,没有过量的图表范例,只包含了柱状图、折线图、饼状图和环形图四种基础的图表。麻雀虽小,五脏俱全。sChart.js 基础能够满足这四种图表的需求。而它的小,体现在它的体积上,代码只要 8kb,假如经由服务器的Gzip紧缩,那就更小了,因而不必忧郁形成项目代码冗余。
该库运用 canvas 完成,兼容 IE9 以上浏览器。
- 堆栈地点:https://github.com/lin-xin/sChart.js
- 文档(中英文):http://blog.gdfengshuo.com/example/sChart/
- 演示地点:http://blog.gdfengshuo.com/example/#/vue-schart
结果
运用指南
装置:
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-manage-system 背景框架中运用了 vue-schart 组件,体积小,加载快。
演示地点:http://blog.gdfengshuo.com/ex…