Vue輕量級圖表組件的安裝和使用

Vue.js是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，并且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅動采用單文件組件和Vue生態系統支持的庫開發的復雜單頁應用。

Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。

Vue.js 自身不是一個全能框架——它只聚焦于視圖層。因此它非常容易學習，非常容易與其它庫或已有項目整合。另一方面，在與相關工具和支持庫一起使用時，Vue.js 也能完美地驅動復雜的單頁應用。

當遇到需要在網頁上繪制圖表的場景時，一般會使用兩個庫：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">
    <h3>Chart: Benedict's Weight</h3>
    <!-- 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 支持各式各樣的圖標，如餅圖、條線圖、比例圖、熱圖等，更多高級的顯示選項，請見其 官方文檔！

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