測試開發實戰[提測平台]19-Echarts圖表在項目的應用
微信搜索【大奇測試開】，關注這個堅持分享測試開發乾貨的傢伙。
在圖表統計展示方面，筆者目前使用過的兩種開源，分別是 Echats 和 G2Plot 組件，從個人使用上來講前者應用更廣、自定義開發更靈活，後者使用上更簡單尤其是在數據綁的格式和方式上更友好，其中在我們使用 Element vue admin 集成分支項目中有關圖表的例子基礎就是Echats，比如其中的混合圖表（柱形+折線）
對應源程式碼中程式碼位置依據可從 /views/chats 看到導入的是 echats 也就是說此組件的的使用方式同樣通過添加依賴和導入即可使用。
結合提測平台的後台數據，接下來就實戰下 Echarts 的圖表的基礎使用。
Apache Echarts
關於 Echarts 是一個基於 JavaScript 的開源可視化圖表庫，最早由百度開源出來，經過社區發展目前已經交給Apache開源組織進行管理，具有設計友好、圖表豐富、活躍的社區支援特性。
[官方地址] //echarts.apache.org
VUE項目使用步驟
步驟一： 項目進行依賴安裝
npm install echarts --save
執行完成後可以在 package.json 的 dependencies 配置有出現 “echarts”: “^5.2.2”
步驟二：頁面添加組件引用和定義一個容器
<template>
<div class="app-container">
<div ref="pieChartDemo" style="width: 600px;height:400px;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
...
</script>
步驟三： 使用 echarts.init 方法初始化一個 echarts 實例並通過 setOption 方法生成一個簡單餅圖，餘下配置程式碼如下（注意查看幾處註解說明）：
export default {
name: 'EchartsDemo',
// 使用mounted在頁面控制項載入在完成後mounted方法進行echart初始化非created
mounted() {
this.initPieChart()
},
methods: {
initPieChart() {
// 採用的是vue ref的方式獲取容器
var chartDom = this.$refs['pieChartDemo']
var myChart = echarts.init(chartDom)
var option = {
title: {
text: '大奇測試開發',
subtext: '文章類型分布',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 20, name: '提測平台' },
{ value: 2, name: '性能測試' },
{ value: 1, name: '流量回放' },
{ value: 3, name: '好文分享' },
{ value: 5, name: '雜談' }
]
}
]
}
option && myChart.setOption(option);
}
}
}
還可以定義div id 通過 getElementById 獲取容器的方式替代this.$refs方式。
<div id="pieChartDemo" style="width: 600px;height:400px;"></div>
...略...
var chartDom = document.getElementById('pieChartDemo')
最終添加項目演示菜單啟動查看實現效果如圖
Echarts的示例運用
經過簡單的三步實現了一個餅狀圖，其他圖表的使用只需要在官方的示例頁中找到想要，經過一些參數調整把 option 部分拷貝過來就行，對於非數據統計需求的複雜需求，官方這麼多圖總能找到一款合適的。
選擇一個示例如「堆疊面積圖」進入，將會展示可以進行調整和編輯的基礎程式碼器頁面，此圖表主要涉及三個數據區域分別是
（1） 數據區域代表解釋
（2）底部X軸展示的標題
（3）實際填充數據，Y對應的數據
series 數組對象個數與legend對應，通過name匹配，每一條對象的data數據又與xAxis的data對應，這也是在開篇提到的 Echarts 個人使用來講，新手做動態數據處理的不方便的地方，因為數據全部分割了，那麼不管是後端給數據或前端數據用都需要按照分散的格式進行再處理。
配置選項是做更多樣式處理和調整的，一般如果不需要改變樣式或CSS能力不強的話建議不要動了，照葫蘆畫瓢就行，關於 option 中各項配置解釋可以在兩個地方得到詳細解釋
- 文檔說明中的概念和應用篇，有基礎解釋與演示；
- 文檔選項下的「配置項手冊」 可以進行搜索得到更多配置說明
- 文檔下還有一個是API文檔，是對一些方法的使用說明，相當於之前項目使用 element ui 組件的事件，比演示程式碼中的 init()、setOption()。
提測數據報表實戰
通過上小節的理論和例子，結合提測平台的提測需求做一個數量趨勢的統計，數據的維度X軸表示按照周時間線，Y軸展示疊加的各個應用的一個數量值，最終使用「堆疊面積圖」展示每周不同應用的提測數量和總數量。
表SQL查詢
滿足展示需求，數據結構稍微有些複雜，需要進行聯合表和分組查詢，最終SQL語句和結果參考如下。
此SQl中用到的分組如果你查詢所有欄位的話在Mysql8版本中其實是有個報錯的，這個後邊我將聯同表多表連接，按時間段如何分組知識點做個專題和大家一起複習一下，這裡就先不展開了。
周提測介面
如果是直接使用上邊SQL語句編寫介面直接返回，顯然還要在Web端用js做一些格式化處理，鑒於python的程式碼能力要更好一些，這裡直接在後端進行數據處理然後直接返回，完整的方法程式碼如下
# dashboard.py
@test_dashboard.route("/api/dashboard/stacked", methods=['POST'])
def get_request_stacked():
# 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()
# 第一次循環過濾生成week和notes，並生成做臨時關鍵詞儲備數據，
# 用戶第二次循環生成 series 需要數據
weeks = []
notes = []
key_value = {}
for row in table_data:
week = row['weeks']
note = row['note']
if not week in weeks:
weeks.append(week)
if not note in notes:
notes.append(note)
key_value[week+note] = row['counts']
# 做一個排序 小到大
weeks.sort()
# 做對應日期下應用數據列表生成，沒有數據的week用0填充，保證順序長度一致
series = {}
for note in notes:
series[note] = []
for week in weeks:
if week+note in key_value:
series[note].append(key_value[week+note])
else:
series[note].append(0)
resp_data = {
'weeks': weeks,
'note': notes,
'series': series
}
resp = format.resp_format_success
resp['data'] = resp_data
return resp
用了兩個for循環完成這個邏輯，其實也算是個小小演算法題目，不知道你是否還有解法，歡迎留言探討。
另外關於報告介面的實現是新增了一個dashboard.py類實現，所以不要忘記之前課程中反覆做一些必要程式碼（完整程式碼參考github），啟動運行後端服務，做個stacked介面請求測試。
堆疊面積圖
在掌握了Echar表的渲染方法和介面數據格式化的充分準備之後，就可以直接上在 src/views/dashboard/index.vue 編寫程式碼，注意實現里有個額外的 series 數據處理，已經標註在程式碼註解里了。
<template>
<div class="dashboard-container">
<div ref="LineChartBoard" style="width: 95%;height:500px;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import { requestStacked } from '@/api/board'
export default {
name: 'Dashboard',
mounted() {
this.getApList()
},
methods: {
getApList() {
requestStacked().then(resp => {
this.initStackedChart(resp.data)
})
},
initStackedChart(data) {
const chartDom = this.$refs['LineChartBoard']
const myChart = echarts.init(chartDom)
const series = []
// 唯一處理需要額外邏輯處理的地方，根據介面數據動態生成series數據
for (var key in data.series) {
series.push(
{
name: key,
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: data.series[key]
}
)
}
var option = {
title: {
text: '周需求提測趨勢'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
// 數據標題展示
data: data.note
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: data.weeks
}
],
yAxis: [
{
type: 'value'
}
],
series: series
}
option && myChart.setOption(option)
}
}
}
</script>
來吧萬事俱備 $ npm run dev 看下實現效果吧。
本篇內容就這些，來回顧下學習內容，主要是以下知識點：
- Vue 中如何使用Echart並根據項目需要找到合適圖表應用
- SQL 分組和聯合表的組合查詢語句實現
- 趨勢查詢介面數據格式化返回的邏輯處理
「提測平台」系列下一篇講帶大家看下阿里螞蟻的 G2Plot 圖表組件如何應用，又有什麼易用之處，敬請關注。
最新的完整程式碼已經提交到了github上，獲取方式關注《大奇測試開發》公眾號，發送 提測平台 關鍵詞即可獲取地址。
關於後續更多進展和分享歡迎持續關注公眾號或部落格。
