跟大家講解下有關Vue 輕量級圖表組件，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說Vue 輕量級圖表組件，小編也收集到了有關Vue 輕量級圖表組件的相關資料，希望大家看到了會喜歡。

當遇到需要在網頁上繪制圖表的場景時，一般會使用兩個庫：D3.js 和 Chart.js 。但其實你根本不需要這么重量級的庫。有時候你只希望使用簡單的 SVG 圖表就能滿足你的需求，這時候你可以使用 Frappe Charts 。它是一個能提供全功能、交互式動畫的輕量級圖表，并配合上簡單的組件包裝器，你就可以與 Vue.js 一起使用了！

開始安裝

開始安裝組件 vue2-frappe，這里我假設你是在現有的一個 Vue.js 項目上工作：

$ npm install --save vue2-frappe

下一步注冊組件：

import Vue from 'vue';import VueFrappe from 'vue2-frappe';import App from './App.vue';Vue.use(VueFrappe);new Vue({ el: '#app', render: h => h(App)});

開始繪制圖表

vue2-frappe 是基于 Frappe Charts 之上的一個層，將其封裝為可用 Vue.js 使用的組件，更多使用請見 Frappe Chart 的文檔 ：

<template> <div id="app"> <h2>Chart: Benedict's Weight</h2> <!-- id - 每一個圖表必須有一個 id. --> <!-- title - 圖表上方顯示的標題 --> <!-- type - 圖表的類型 線性圖、餅圖、條形圖、等 --> <!-- labels - x 軸上的值 --> <!-- height- 可選，圖表的高度 --> <!-- colors - 將每一個數據集進行顏色區分 --> <!-- lineOptions - 線形圖的更多選項，請見文檔--> <!-- datasets - 數據集，對象數組 --> <vue-frappe id="my-chart-id" title="Benedict's Weight From 2017-2018 (lbs)" type="line" :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']" :height="650" :colors="['#008F68', '#FAE042']" :lineOptions="{regionFill: 1}" :datasets="[ {name: '2017', values: benedictsWeight2017}, {name: '2018', values: benedictsWeight2018} ]" ></vue-frappe> <p>Conclusion: Benedict needs to go on a diet.</p> </div></template><script>export default { name: 'app', data() { return { benedictsWeight2017: [480, 485, 491, 489, 485, 490, 497, 510, 512, 521, 530, 545], benedictsWeight2018: [540, 575, 570, 555, 572, 580, 585, 587, 588, 590, 592, 590] } }}</script>

Frappe Charts 支持各式各樣的圖標，如餅圖、條線圖、比例圖、熱圖等，更多高級的顯示選項，請見其 官方文檔！

推薦教程：《JS教程》

以上就是Vue 輕量級圖表組件的詳細內容，更多請關注php中文網其它相關文章！

來源：php中文網