對vue-schart的詳細介紹

介紹

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

• 倉庫位址：

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

該程式庫使用 canvas 實現，相容於 IE9 以上瀏覽器。

• 倉庫位址：

• 文件(中英文)：

• 示範位址：

效果

使用指南

安裝:

npm install vue-schart -S

在vue元件中使用:

<template><p id="app"><schart :canvasId="canvasId"            :type="type"            :width="width"            :height="height"            :data="data"            :options="options"></schart></p></template><script>import Schart from &#39;vue-schart&#39;;export default {data() {return {canvasId: &#39;myCanvas&#39;,type: &#39;bar&#39;,width: 500,height: 400,data: [{name: &#39;2014&#39;, value: 1342},{name: &#39;2015&#39;, value: 2123},{name: &#39;2016&#39;, value: 1654},{name: &#39;2017&#39;, value: 1795},],options: {title: &#39;Total sales of stores in recent years&#39;}}},components:{Schart}}</script>

應用程式

vue-manage-system 後台框架中應用了vue-schart 元件，體積小，載入快。

以上是對vue-schart的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！