測試開發實戰[提測平臺]20-圖表G2Plot在專案的實踐實錄

MrZ大奇發表於2022-02-07

微信搜尋【大奇測試開】，關注這個堅持分享測試開發乾貨的傢伙。

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圖表應用實戰的一個例子講完，來回過頭來看下螞蟻金服發展而來資料視覺化全貌，從官方首頁 https://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，獲取方式關注《大奇測試開發》公眾號，傳送 提測平臺 關鍵詞即可獲取。

相關文章