測試開發實戰[提測平台]20-圖表G2Plot在項目的實踐實錄
微信搜索【大奇測試開】，關注這個堅持分享測試開發乾貨的傢伙。
G2Plot項目應用
上一篇《提測平台19-Echarts圖表在項目的實踐》講解了Echarts的圖表應用，此篇來看下開箱即用且數據綁定更容易的G2Plot組件庫如何使用，先上圖看下已經實現的分組柱狀圖效果。
周需求數據
對應數據介面邏輯SQL語句沒有變只是查詢結果改成直接返回，也就是說沒有像為了Echarts使用的格式化經過邏輯的處理，介面實現直接拷貝一份修改下名字，刪除格式化部分就得到本篇需要的分組表查詢直出數據。
# apis/dashboard.py
@test_dashboard.route("/api/dashboard/metadata", methods=['POST'])
def get_request_stacked_metadata():
# body = json.loads(request.get_data())
connection = pool.connection()
with connection.cursor() as cursor:
sql_select = 'SELECT DATE_FORMAT(request.createDate,"%Y%u") weeks, apps.note, COUNT(apps.id) counts FROM request LEFT JOIN apps ON request.appId = apps.id GROUP BY weeks, apps.note;'
cursor.execute(sql_select)
table_data = cursor.fetchall()
resp = format.resp_format_success
resp['data'] = table_data
return resp
啟動 TPMServer 服務，用postman工具請求/metadata介面查看返回，這裡我直接放出與上篇 /stacked 介面請求對比圖，來看下數據結構的不同點。
當然最新的 /metadata 介面數據也可給Echarts用，但需要在JS前端賦值時按照數據格式要求做下邏輯處理，如果還沒有直觀印象，那在放一個兩種不同組件實現圖表的時候的數據綁定程式碼對比就能有感受了。
左邊我隱去很多配置，詳細的程式碼翻到上一篇或者直接查看源程式碼，這裡單純從數據綁定上來看，右側G2Plot組件以 JSONObject List直接給data即可，也就是本來的複雜數據處理部分完全封箱在內部了，這對於非專業的前端測試開發全棧來講非常友好，也能大大提高開發效率。
開頭的圖表使用的是 圓角柱狀圖，在提測平台項目Dashboard實現的目的是展示同周期內各項目提測的對比情況，以管理者的角度來看當前以及未來資源分配上是否均衡，當然以當前的圖表只能看出某個服務或業務的情況，不足以看出測試人員上的繁忙情況，所以在之前的項目報表實現還有個以人為度周期統計表，這個就在我分享完剩下的實現和方法後做為一個獨立練手題目，留個各位跟著系列學習那麼努力的同學你吧。
繼續正題內容，來看下 G2Plot 圖表是如何實現數據渲染，這裡會給出完整步驟程式碼，因為後邊還有會有優化內容，原程式碼會被覆蓋。
安裝依賴包
$ npm install @antv/g2plot
圖表庫使用
引入柱狀圖組件和寫好的介面請求方法
import { Column } from '@antv/g2plot'
import { requestMetaData } from '@/api/board'
創建個設定大小div容器用於初始化數據圖表使用，並且這裡嵌套了一個element ui 卡片組件用於增加標題展示和樣式更好優雅
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>周需求分組量</span>
</div>
<div id="ColumnBoard" style="width: 95%;height:360px;" />
</el-card>
請求介面數據並直接通過new colunm初始化 分組柱狀圖
// 程式碼文件 src/views/dashboard/index.vue
<script>
export default {
name: 'Dashboard',
mounted() {
this.getMetaDate()
},
methods: {
getMetaDate() {
requestMetaData().then(resp => {
this.initStackedColumn(resp.data)
})
},
initStackedColumn(data) {
const stackedColumnPlot = new Column('ColumnBoard', {
data,
xField: 'weeks',
yField: 'counts',
seriesField: 'note',
isGroup: 'true',
columnStyle: {
radius: [20, 20, 0, 0]
}
})
stackedColumnPlot.render()
}
}
}
</script>
最終 npm run
dev 編譯運行 TMPWeb 查看效果是不是和片頭效果一樣，如果遇到什麼問題，記得打開瀏覽器開發者工具看錯誤資訊，修正解決它。
Antv螞蟻數據可視化
提測平台項目中的G2Plot圖表應用實戰的一個例子講完，來回過頭來看下螞蟻金服發展而來數據可視化全貌，從官方首頁 //antv.vision/zh 可以看出，它提供了一套各個層面的解決方案，涉及個人、企業、流程、數據、科學計算、移動端等等各類圖表庫，可以按需看看官方文檔使用。
這裡還是重點介紹 G2Plot 它是一套簡單、易用、並具備一定擴展能力和組合能力的統計圖表庫，基於圖形語法理論搭建而成。
特性
- 開箱即用、默認好用的高品質統計圖表
- 提煉自企業級產品的視覺語言和設計規範
- 響應式圖表：致力於解決圖表在任何數據和顯示尺寸下的基本可讀性問題
- 圖層化設計方法：在 G2Plot 體系下，圖表不僅僅只是各不相關的實例，圖層概念的引入提供了多圖表組合疊聯動，共同講述一個數據故事的可能性
圖示
常用的如折線圖、面積圖、條形圖、餅圖、進度圖等都能在 圖表示例 找到具體的使用例子，比如項目應用中的 分組柱狀圖 左下角是具體所需的數據格式Data和JavaScript程式碼，可以更改其數據內容和一些配置選項，中間的表圖會實時渲染呈現，右側測試設計說明和API使用文檔，對於項目中的實現可以完全在這裡調試好，然後直接粘貼到程式碼項目中即可，更多的教程參考官方菜單欄「教程」和「API」。
通用API
除了靜態的配置，還需著重說下常用的API，用於組件周期各個階段的事件操作，就比如數據統計一般還會需要根據條件查詢進行動態的更新，本篇一開始的例子只是在 mounted 頁面初始後被創建了一次，並不能支援數據的更改和屬性配置的更改，這裡就需要知曉 update 和 changeData 用法。
截圖中展示定義一個圖的實例，然後通過changeData改變內部的data賦值，通過update改變選項配置。接下來將通過升級優化一下篇首的例子做個實戰。
優化提測圖表
在實際的工作項目通常的需求，是根據某些條件查詢然後動態呈現圖表，這裡便對「周需求分組量」做開發優化，分別支援時間條件搜索和展示模式來做最終實踐。
介面支援時間過濾
對於 /metadata 介面需要增加body請求獲取時間範圍，然後增加個Where查詢邏輯，支援時間條件查詢，核心改動程式碼如下：
with connection.cursor() as cursor:
if 'date' in body and body['date'] is not None and len(body['date']) > 0:
start_date = body['date'][0]
end_date = body['date'][1]
sql_select = 'SELECT DATE_FORMAT(request.createDate,"%Y%u") weeks, apps.note, COUNT(apps.id) counts FROM request LEFT JOIN apps ON request.appId = apps.id WHERE request.createDate BETWEEN "{}" AND "{}" GROUP BY weeks, apps.note;'.format(str(start_date), str(end_date))
else:
sql_select = 'SELECT DATE_FORMAT(request.createDate,"%Y%u") weeks, apps.note, COUNT(apps.id) counts FROM request LEFT JOIN apps ON request.appId = apps.id GROUP BY weeks, apps.note;'
數據變更changeData
另外重要的一個改造點，是需要定義頁面內全局的組件對象和請求數據存儲變數，然後在mounted中直接賦值做頁面級初始化，在點擊查詢的時候更改data，在切換模式的時候更改options屬性，mounted和data核心的程式碼如下：
mounted() {
// 頁面初始化完成後僅初始化一次默認值
this.stackedColumnPlot = new Column('ColumnBoard', {
data: this.stackedColumnData,
xField: 'weeks',
yField: 'counts',
seriesField: 'note',
isGroup: this.stackedColumnMode ? 'true' : 'false',
columnStyle: {
radius: [20, 20, 0, 0]
}
})
this.stackedColumnPlot.render()
},
data() {
return {
// 頁面全局變數的聲明
stackedColumnPlot: undefined,
// 查詢返回的數據
stackedColumnData: [],
// 顯示模式，分組還是疊加
stackedColumnMode: true,
// 綁定的查詢數據
searchValue: {
date: []
}
}
},
method：查詢方法優化程式碼，重點看changeData應用，即每次查詢結果重新更改圖表數據。
getMetaDate() {
// 請求條件 日期時間
const params = {
date: this.searchValue.date
}
requestMetaData(params).then(resp => {
this.stackedColumnData = resp.data
// mounted中的stackedColumnPlot對象在method方法中動態賦值
this.stackedColumnPlot.changeData(this.stackedColumnData)
// this.initStackedColumn(resp.data)
})
},
其他地方沒有列出來的部分，請自行優化或者查看完整程式碼，最終帶查詢效果如GIF。
配置變更Update
關於屬性更改設置我們通過一個屬性 分組 還是 疊積 來實現，注意定義的options中通過isGroup調節是否為分組， 通過isStack 調整是否為疊積圖，由於實際中默認就是疊加，所以isStack設置在本次動態設置中可直接忽略。
changeBoardMode() {
const options = {
isGroup: this.stackedColumnMode
}
this.stackedColumnPlot.update(options)
}
同樣做個GIF直觀感受下實現效果，通過Switch 開關 組件控制是哪種模式。
至此本篇想要實現和分享的內容已經完畢，不知道有沒有學會G2Plot的使用精髓，隨著此篇的結束其實《提測平台》測試開發實戰分享系列也收尾了，按照最初的產品規劃所有的需求已經全部實現，接下來在重新整理過後會有個總結帖，目的是能更好的體系化 的閱讀和跟進，涉及到改錯、換圖，以及markdow發布，整理需要一些時間，還請期待一下。
當然系列的結束並不代表分享的技術，大家有什麼實際操作過程中的問題，都可以私信我或者入群交流，也許它就成為專門一個番外篇也未嘗不可，還是那句話學習過程中一定會遇到問題，這是很好的事情，解決了它就是最大收穫，怕就怕文章看了，影片看了，程式碼照著敲了，運行一切順利，最後學完啥也沒會。
程式碼已經同步更新到github，獲取方式關注《大奇測試開發》公眾號，發送 提測平台 關鍵詞即可獲取。
