vue-schart ： vue.js 的圖表組件

介紹

vue-schart 是使用vue.js封裝了sChart.js圖表庫的一個小組件。支持vue.js 1.x & 2.x

• 倉庫地址：lin-xin/vue-schart

sChart.js 作為一個小型簡單的圖表庫，沒有過多的圖表類型，只包含了柱狀圖、折線圖、餅狀圖和環形圖四種基本的圖表。麻雀雖小，五臟俱全。sChart.js 基本可以滿足這四種圖表的需求。而它的小，體現在它的體積上，代碼只有 8kb，如果經過伺服器的Gzip壓縮，那就更小了，因此不用擔心造成項目代碼冗餘。

該庫使用 canvas 實現，兼容 IE9 以上瀏覽器。

• 倉庫地址：https://github.com/lin-xin/sChart.js

• 文檔(中英文)：sChart.js 中文文檔

• 演示地址：sChart.js 演示

效果

使用指南

安裝:

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://open.omwteam.com/work/...

更多文章：lin-xin/blog

推薦閱讀：