資訊專欄INFORMATION COLUMN
摘要：前言的組件化開發(fā)是一個非常不錯的機制一處開發(fā)多處引用，不僅降低的維護成本，提高了開發(fā)效率，而且多帶帶的組件有多帶帶的視圖和交互數(shù)據(jù)邏輯，使得系統(tǒng)層次更加分明。接下來就開始我們的組件化之旅。
前言
開發(fā)場景vue 的組件化開發(fā)是一個非常不錯的機制."一處開發(fā),多處引用"，不僅降低的維護成本，提高了開發(fā)效率，而且多帶帶的組件有多帶帶的視圖和交互數(shù)據(jù)邏輯，使得系統(tǒng)層次更加分明。若有問題可加群264591039與我討論~轉(zhuǎn)載文章請標明出處！
數(shù)據(jù)可視化是我們互聯(lián)網(wǎng)常見的功能，所以難免我們會在項目中插入圖表等，找到一個還算可以的圖形插件，阿里的G2圖形庫，詳情請參見G2官網(wǎng)。接下來就開始我們的Vue G2組件化之旅。
腳手架搭建helloworld先用腳手架工具 vue-cli搭建一個vue的helloworld項目(Vue的相關(guān)教程請看Vue官網(wǎng))，按照readme文檔正常運行該項目。
安裝G2插件在package.json的目錄下用npm包管理工具安裝G2插件庫
npm install --save-dev g2
我用到的版本是2.2.1，現(xiàn)在最新的好像是2.2.2，應該也沒什么問題，不過我沒測試過
新建G2Line.vue單文件組件在components目錄下新建G2Line.vue文件（當前是以線形圖為例的組件）。
在template標簽中新增標簽
在script標簽中引入G2并開始先關(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}, // 測試數(shù)據(jù)，根據(jù)自己需求自己設置數(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)建的時候更新圖表，但是這個不適用于異步請求接口獲取相關(guān)數(shù)據(jù)，所以采用下面的監(jiān)聽的方式
},
beforeUpdate: function () {
// this.drawChart();
},
watch: {
charData: function (val, oldVal) { // 監(jiān)聽charData，當放生變化時，觸發(fā)這個回調(diào)函數(shù)繪制圖表
console.log("new: %s, old: %s", val, oldVal);
this.drawChart(val);
}
},
methods: {
drawChart: function (datas) {
// 如果圖形存在則刪除再創(chuàng)建，這個地方感覺稍微有點坑
// 具體的G2 api函數(shù)說明請看上面提供的官網(wǎng)地址，此處不再逐一說明
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組件，并加載到當前vue實例中
獲取服務端數(shù)據(jù)之后，在template中創(chuàng)建組件標簽，并將serverData發(fā)送給子組件G2Line
刷新界面，成功看到頁面圖表的渲染
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81519.html
摘要：最近阿里正式開源的圖表庫基于技術(shù)棧，各個圖表項皆采用了組件的形式，貼近的使用特點。相關(guān)文檔組件化阿里的圖表組件手拉手，用開發(fā)動態(tài)刷新組件文檔地址一安裝通過引入二引用成功安裝完成之后，即可使用或進行引用。最近阿里正式開源的BizCharts圖表庫基于React技術(shù)棧，各個圖表項皆采用了組件的形式，貼近React的使用特點。同時BizCharts基于G2進行封裝，Bizcharts也繼承了G2相...
摘要：所以筆者選擇了，為什么會選擇一是因為它是阿里出品，經(jīng)歷了一年左右的打磨已經(jīng)完全適應在使用其次是它支持自由定制，不會像那樣高度封裝，所以在開發(fā)復雜圖表的時候會更加得心應手。只是阿里圖表庫中的一員。 實際上，在數(shù)據(jù)可視化這一塊筆者并沒有很多的開發(fā)經(jīng)歷和經(jīng)驗，不過正是因為這個問題筆者才決定學習一門數(shù)據(jù)可視化框架來彌補自己在這一方面的不足。在這個大數(shù)據(jù)統(tǒng)治的時代，數(shù)據(jù)能給我們提供前所未有的便捷...
摘要：寫在前面阿里巴巴于去年開放了它的內(nèi)部圖表庫初版，在這一年的時間里，新增了許多特性，并對渲染細節(jié)及渲染性能進行大幅度的調(diào)優(yōu)。在阿里內(nèi)部多個部門多條業(yè)務線里反復打磨了兩年之久后，于去年年底對外開源。 寫在前面 阿里巴巴于去年開放了它的內(nèi)部圖表庫 Bizcharts 初版，在這一年的時間里，Bizcharts 新增了許多特性，并對渲染細節(jié)及渲染性能進行大幅度的調(diào)優(yōu)。 本文將簡單的介紹阿里開源...
摘要：更好的閱讀體驗，請移步語雀是螞蟻金服數(shù)據(jù)可視化解決方案的一個子產(chǎn)品，是一套數(shù)據(jù)驅(qū)動的高交互的可視化圖形語法。歡迎共建是一套數(shù)據(jù)驅(qū)動的高交互的可視化圖形語法。 showImg(https://segmentfault.com/img/remote/1460000016710544); 更好的閱讀體驗，請移步語雀 G2 是螞蟻金服數(shù)據(jù)可視化解決方案 AntV 的一個子產(chǎn)品，是一套數(shù)據(jù)驅(qū)動的...
閱讀 3476·2023-04-25 18:52
閱讀 2488·2021-11-22 15:31
閱讀 1228·2021-10-22 09:54
閱讀 3017·2021-09-29 09:42
閱讀 612·2021-09-26 09:55
閱讀 915·2021-09-13 10:28
閱讀 1111·2019-08-30 15:56
閱讀 2111·2019-08-30 15:55
