亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

Yuqi / 996人閱讀

摘要：前言的組件化開(kāi)發(fā)是一個(gè)非常不錯(cuò)的機(jī)制一處開(kāi)發(fā)多處引用，不僅降低的維護(hù)成本，提高了開(kāi)發(fā)效率，而且多帶帶的組件有多帶帶的視圖和交互數(shù)據(jù)邏輯，使得系統(tǒng)層次更加分明。接下來(lái)就開(kāi)始我們的組件化之旅。

前言 
vue 的組件化開(kāi)發(fā)是一個(gè)非常不錯(cuò)的機(jī)制."一處開(kāi)發(fā),多處引用"，不僅降低的維護(hù)成本，提高了開(kāi)發(fā)效率，而且多帶帶的組件有多帶帶的視圖和交互數(shù)據(jù)邏輯，使得系統(tǒng)層次更加分明。若有問(wèn)題可加群264591039與我討論~轉(zhuǎn)載文章請(qǐng)標(biāo)明出處！
開(kāi)發(fā)場(chǎng)景

數(shù)據(jù)可視化是我們互聯(lián)網(wǎng)常見(jiàn)的功能，所以難免我們會(huì)在項(xiàng)目中插入圖表等，找到一個(gè)還算可以的圖形插件，阿里的G2圖形庫(kù)，詳情請(qǐng)參見(jiàn)G2官網(wǎng)。接下來(lái)就開(kāi)始我們的Vue G2組件化之旅。

腳手架搭建helloworld

先用腳手架工具 vue-cli搭建一個(gè)vue的helloworld項(xiàng)目(Vue的相關(guān)教程請(qǐng)看Vue官網(wǎng))，按照readme文檔正常運(yùn)行該項(xiàng)目。

安裝G2插件

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

npm install --save-dev g2

我用到的版本是2.2.1，現(xiàn)在最新的好像是2.2.2，應(yīng)該也沒(méi)什么問(wèn)題，不過(guò)我沒(méi)測(cè)試過(guò)

新建G2Line.vue單文件組件

在components目錄下新建G2Line.vue文件（當(dāng)前是以線形圖為例的組件）。
在template標(biāo)簽中新增標(biāo)簽

在script標(biāo)簽中引入G2并開(kāi)始先關(guān)操作代碼：

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},  // 測(cè)試數(shù)據(jù)，根據(jù)自己需求自己設(shè)置數(shù)據(jù)
              {"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();       // 第一步想到的是創(chuàng)建的時(shí)候更新圖表，但是這個(gè)不適用于異步請(qǐng)求接口獲取相關(guān)數(shù)據(jù)，所以采用下面的監(jiān)聽(tīng)的方式
    },
    beforeUpdate: function () {
//      this.drawChart();
    },
    watch: {
      charData: function (val, oldVal) {    // 監(jiān)聽(tīng)charData，當(dāng)放生變化時(shí)，觸發(fā)這個(gè)回調(diào)函數(shù)繪制圖表
        console.log("new: %s, old: %s", val, oldVal);
        this.drawChart(val);
      }
    },
    methods: {
      drawChart: function (datas) {
        // 如果圖形存在則刪除再創(chuàng)建，這個(gè)地方感覺(jué)稍微有點(diǎn)坑
        // 具體的G2 api函數(shù)說(shuō)明請(qǐng)看上面提供的官網(wǎng)地址，此處不再逐一說(shuō)明
        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: "數(shù)量值(人)"
          }
        });
        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組件，并加載到當(dāng)前vue實(shí)例中

獲取服務(wù)端數(shù)據(jù)之后，在template中創(chuàng)建組件標(biāo)簽，并將serverData發(fā)送給子組件G2Line
刷新界面，成功看到頁(yè)面圖表的渲染


文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/81519.html

相關(guān)文章

  • 三大圖表庫(kù)：ECharts 、 BizCharts 和 G2，該如何選擇？

    摘要：最近阿里正式開(kāi)源的圖表庫(kù)基于技術(shù)棧，各個(gè)圖表項(xiàng)皆采用了組件的形式，貼近的使用特點(diǎn)。相關(guān)文檔組件化阿里的圖表組件手拉手，用開(kāi)發(fā)動(dòng)態(tài)刷新組件文檔地址一安裝通過(guò)引入二引用成功安裝完成之后，即可使用或進(jìn)行引用。最近阿里正式開(kāi)源的BizCharts圖表庫(kù)基于React技術(shù)棧，各個(gè)圖表項(xiàng)皆采用了組件的形式，貼近React的使用特點(diǎn)。同時(shí)BizCharts基于G2進(jìn)行封裝，Bizcharts也繼承了G2相...

    draveness 評(píng)論0 收藏0

  • [BizCharts學(xué)習(xí)筆記](méi) --- 數(shù)據(jù)可視化

    摘要：所以筆者選擇了，為什么會(huì)選擇一是因?yàn)樗前⒗锍銎?，?jīng)歷了一年左右的打磨已經(jīng)完全適應(yīng)在使用其次是它支持自由定制，不會(huì)像那樣高度封裝，所以在開(kāi)發(fā)復(fù)雜圖表的時(shí)候會(huì)更加得心應(yīng)手。只是阿里圖表庫(kù)中的一員。 實(shí)際上，在數(shù)據(jù)可視化這一塊筆者并沒(méi)有很多的開(kāi)發(fā)經(jīng)歷和經(jīng)驗(yàn)，不過(guò)正是因?yàn)檫@個(gè)問(wèn)題筆者才決定學(xué)習(xí)一門(mén)數(shù)據(jù)可視化框架來(lái)彌補(bǔ)自己在這一方面的不足。在這個(gè)大數(shù)據(jù)統(tǒng)治的時(shí)代，數(shù)據(jù)能給我們提供前所未有的便捷...

    CoffeX 評(píng)論0 收藏0

  • 阿里巴巴圖表庫(kù) Bizcharts 正式開(kāi)源

    摘要：寫(xiě)在前面阿里巴巴于去年開(kāi)放了它的內(nèi)部圖表庫(kù)初版，在這一年的時(shí)間里，新增了許多特性，并對(duì)渲染細(xì)節(jié)及渲染性能進(jìn)行大幅度的調(diào)優(yōu)。在阿里內(nèi)部多個(gè)部門(mén)多條業(yè)務(wù)線里反復(fù)打磨了兩年之久后，于去年年底對(duì)外開(kāi)源。 寫(xiě)在前面 阿里巴巴于去年開(kāi)放了它的內(nèi)部圖表庫(kù) Bizcharts 初版，在這一年的時(shí)間里，Bizcharts 新增了許多特性，并對(duì)渲染細(xì)節(jié)及渲染性能進(jìn)行大幅度的調(diào)優(yōu)。 本文將簡(jiǎn)單的介紹阿里開(kāi)源...

    Yangder 評(píng)論0 收藏0

  • 螞蟻金服可視化圖形語(yǔ)法 G2 3.3 發(fā)布：琢·磨

    摘要：更好的閱讀體驗(yàn)，請(qǐng)移步語(yǔ)雀是螞蟻金服數(shù)據(jù)可視化解決方案的一個(gè)子產(chǎn)品，是一套數(shù)據(jù)驅(qū)動(dòng)的高交互的可視化圖形語(yǔ)法。歡迎共建是一套數(shù)據(jù)驅(qū)動(dòng)的高交互的可視化圖形語(yǔ)法。 showImg(https://segmentfault.com/img/remote/1460000016710544); 更好的閱讀體驗(yàn)，請(qǐng)移步語(yǔ)雀 G2 是螞蟻金服數(shù)據(jù)可視化解決方案 AntV 的一個(gè)子產(chǎn)品，是一套數(shù)據(jù)驅(qū)動(dòng)的...

    TZLLOG 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<