Vue.js是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)。Vue 的核心庫(kù)只關(guān)注視圖層，并且非常容易學(xué)習(xí)，非常容易與其它庫(kù)或已有項(xiàng)目整合。另一方面，Vue 完全有能力驅(qū)動(dòng)采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)的復(fù)雜單頁(yè)應(yīng)用。

創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)公司、重慶網(wǎng)站制作、網(wǎng)站營(yíng)銷推廣、網(wǎng)站開(kāi)發(fā)設(shè)計(jì)，對(duì)服務(wù)成都水電改造等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)及推廣經(jīng)驗(yàn)。創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司成立于2013年,提供專業(yè)網(wǎng)站制作報(bào)價(jià)服務(wù),我們深知市場(chǎng)的競(jìng)爭(zhēng)激烈，認(rèn)真對(duì)待每位客戶，為客戶提供賞心悅目的作品。 與客戶共同發(fā)展進(jìn)步，是我們永遠(yuǎn)的責(zé)任！

Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。

Vue.js 自身不是一個(gè)全能框架——它只聚焦于視圖層。因此它非常容易學(xué)習(xí)，非常容易與其它庫(kù)或已有項(xiàng)目整合。另一方面，在與相關(guān)工具和支持庫(kù)一起使用時(shí)，Vue.js 也能完美地驅(qū)動(dòng)復(fù)雜的單頁(yè)應(yīng)用。

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

開(kāi)始安裝

開(kāi)始安裝組件 vue2-frappe，這里我假設(shè)你是在現(xiàn)有的一個(gè) Vue.js 項(xiàng)目上工作：

$ npm install --save vue2-frappe

下一步注冊(cè)組件：

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)
});

開(kāi)始繪制圖表

vue2-frappe 是基于 Frappe Charts 之上的一個(gè)層，將其封裝為可用 Vue.js 使用的組件，更多使用請(qǐng)見(jiàn) Frappe Chart 的文檔 ：

<template>
  <div id="app">
    <h3>Chart: Benedict's Weight</h3>
    <!-- id - 每一個(gè)圖表必須有一個(gè) id. -->
    <!-- title - 圖表上方顯示的標(biāo)題 -->
    <!-- type - 圖表的類型 線性圖、餅圖、條形圖、等 -->
    <!-- labels - x 軸上的值 -->
    <!-- height- 可選，圖表的高度 -->
    <!-- colors - 將每一個(gè)數(shù)據(jù)集進(jìn)行顏色區(qū)分 -->
    <!-- lineOptions - 線形圖的更多選項(xiàng)，請(qǐng)見(jiàn)文檔-->
    <!-- datasets - 數(shù)據(jù)集，對(duì)象數(shù)組 -->
    <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 支持各式各樣的圖標(biāo)，如餅圖、條線圖、比例圖、熱圖等，更多高級(jí)的顯示選項(xiàng)，請(qǐng)見(jiàn)其 官方文檔！

以上就是Vue 輕量級(jí)圖表組件的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章！

當(dāng)前文章：Vue輕量級(jí)圖表組件的安裝和使用
網(wǎng)址分享：http://chinadenli.net/article2/gdscic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司、App設(shè)計(jì)、手機(jī)網(wǎng)站建設(shè)、用戶體驗(yàn)、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)