Vuejs2.X組件化-阿里的G2圖表組件

前言

vue 的組件化開發是一個很是不錯的機制.'一處開發,多處引用'，不只下降的維護成本，提升了開發效率，並且單獨的組件有單獨的視圖和交互數據邏輯，使得系統層次更加分明。如有問題可加羣264591039與我討論~轉載文章請標明出處！

開發場景

數據可視化是咱們互聯網常見的功能，因此不免咱們會在項目中插入圖表等，找到一個還算能夠的圖形插件，阿里的G2圖形庫，詳情請參見G2官網。接下來就開始咱們的Vue G2組件化之旅。

腳手架搭建helloworld

先用腳手架工具 vue-cli搭建一個vue的helloworld項目(Vue的相關教程請看Vue官網)，按照readme文檔正常運行該項目。

安裝G2插件

在package.json的目錄下用npm包管理工具安裝G2插件庫

npm install --save-dev g2

我用到的版本是2.2.1，如今最新的好像是2.2.2，應該也沒什麼問題，不過我沒測試過

新建G2Line.vue單文件組件

在components目錄下新建G2Line.vue文件（當前是以線形圖爲例的組件）。
在template標籤中新增標籤

<template>
  <!--此處的id用變量，方便同一頁面引用屢次相同的組件-->
  <div :id="id"></div>
</template>

在script標籤中引入G2並開始先關操做代碼：

import G2 from 'g2';
  export default {
    data () {
      return {
        chart: null
      };
    },
    props: {
      charData: {
        type: Array,
        default: function () {
          return {
            data: [{'mzkId': 112, 'strftime': "2017-01-11", 'value': 9275501},  // 測試數據，根據本身需求本身設置數據
              {'mzkId': 112, 'strftime': "2017-01-12", 'value': 9281904},
              {'mzkId': 112, 'strftime': "2017-01-13", 'value': 9290777},
              {'mzkId': 112, 'strftime': "2017-01-14", 'value': 9297913},
              {'mzkId': 112, 'strftime': "2017-01-15", 'value': 9306918},
              {'mzkId': 112, 'strftime': "2017-01-16", 'value': 9315641}]
          };
        }
      },
      id: String
    },
    mounted: function () {
//      this.drawChart();       // 第一步想到的是建立的時候更新圖表，可是這個不適用於異步請求接口獲取相關數據，因此採用下面的監聽的方式
    },
    beforeUpdate: function () {
//      this.drawChart();
    },
    watch: {
      charData: function (val, oldVal) {    // 監聽charData，當放生變化時，觸發這個回調函數繪製圖表
        console.log('new: %s, old: %s', val, oldVal);
        this.drawChart(val);
      }
    },
    methods: {
      drawChart: function (datas) {
        // 若是圖形存在則刪除再建立，這個地方感受稍微有點坑
        // 具體的G2 api函數說明請看上面提供的官網地址，此處再也不逐一說明
        this.chart && this.chart.destroy();
        let data = datas;
        this.chart = new G2.Chart({
          id: this.id,
          width: 1000,
          height: 250
        });
        this.chart.source(data, {
          strftime: {
            alias: '日期',
            type: 'cat',
            range: [0, 1]
          },
          value: {
            alias: '數量值(人)'
          }
        });
        this.chart.line().position('strftime*value').size(2);
        this.chart.point().position('strftime*value').color('#757373')
          .shape('circle')
          .label('value', {offset: 20, label: {fill: '#000'}});
        this.chart.animate(false);
        this.chart.render();
      }
    }
  }

App.vue引入組件並渲染圖表

在app.vue中引入上一步新建的G2Line.vue組件，並加載到當前vue實例中

<script>
    import G2Line from './components/G2Line.vue';
    export default {
        components: {
            G2Line
        },
        data () {
            return {
                serverData: []
            } 
        },
        methods: {
            // 此處省略從服務器獲取數據而且賦值給this.serverData
            // 推薦使用axios請求接口
        }
    }
</script>

獲取服務端數據以後，在template中建立組件標籤，並將serverData發送給子組件G2Line

<!--同步設置id傳送給子組件-->
<g2-line :charData="serverData" :id="'c1'" id="c1"></g2-line>

刷新界面，成功看到頁面圖表的渲染