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

Yuqi 發布于2019-08-20 14:17 / 933人閱讀

摘要：前言的組件化開發是一個非常不錯的機制一處開發多處引用，不僅降低的維護成本，提高了開發效率，而且多帶帶的組件有多帶帶的視圖和交互數據邏輯，使得系統層次更加分明。接下來就開始我們的組件化之旅。

前言

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標簽中新增標簽

在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實例中

獲取服務端數據之后，在template中創建組件標簽，并將serverData發送給子組件G2Line

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

云服務器 GPU云服務器 linux的組件服務器的組件 android的四大組件 php各組件的用途

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81519.html

三大圖表庫：ECharts 、 BizCharts 和 G2，該如何選擇？

摘要：最近阿里正式開源的圖表庫基于技術棧，各個圖表項皆采用了組件的形式，貼近的使用特點。相關文檔組件化阿里的圖表組件手拉手，用開發動態刷新組件文檔地址一安裝通過引入二引用成功安裝完成之后，即可使用或進行引用。最近阿里正式開源的BizCharts圖表庫基于React技術棧，各個圖表項皆采用了組件的形式，貼近React的使用特點。同時BizCharts基于G2進行封裝，Bizcharts也繼承了G2相...

draveness 2019-04-23 13:19 評論0 收藏0
[BizCharts學習筆記] --- 數據可視化

摘要：所以筆者選擇了，為什么會選擇一是因為它是阿里出品，經歷了一年左右的打磨已經完全適應在使用其次是它支持自由定制，不會像那樣高度封裝，所以在開發復雜圖表的時候會更加得心應手。只是阿里圖表庫中的一員。實際上，在數據可視化這一塊筆者并沒有很多的開發經歷和經驗，不過正是因為這個問題筆者才決定學習一門數據可視化框架來彌補自己在這一方面的不足。在這個大數據統治的時代，數據能給我們提供前所未有的便捷...

CoffeX 2019-08-23 11:56 評論0 收藏0
阿里巴巴圖表庫 Bizcharts 正式開源

摘要：寫在前面阿里巴巴于去年開放了它的內部圖表庫初版，在這一年的時間里，新增了許多特性，并對渲染細節及渲染性能進行大幅度的調優。在阿里內部多個部門多條業務線里反復打磨了兩年之久后，于去年年底對外開源。寫在前面阿里巴巴于去年開放了它的內部圖表庫 Bizcharts 初版，在這一年的時間里，Bizcharts 新增了許多特性，并對渲染細節及渲染性能進行大幅度的調優。本文將簡單的介紹阿里開源...

Yangder 2019-08-23 11:35 評論0 收藏0
螞蟻金服可視化圖形語法 G2 3.3 發布：琢·磨

摘要：更好的閱讀體驗，請移步語雀是螞蟻金服數據可視化解決方案的一個子產品，是一套數據驅動的高交互的可視化圖形語法。歡迎共建是一套數據驅動的高交互的可視化圖形語法。 showImg(https://segmentfault.com/img/remote/1460000016710544); 更好的閱讀體驗，請移步語雀 G2 是螞蟻金服數據可視化解決方案 AntV 的一個子產品，是一套數據驅動的...

TZLLOG 2019-08-23 12:23 評論0 收藏0