一種汽車數(shù)據(jù)自助報(bào)表前端實(shí)現(xiàn)方案

溫豐蔚，張送，韋通明，溫麗梅，韋統(tǒng)邊

（上汽通用五菱汽車股份有限公司技術(shù)中心，廣西 柳州 545007）

引言

近年來(lái)，隨著汽車數(shù)字化網(wǎng)聯(lián)化的發(fā)展，汽車變得更為智能，也有更多數(shù)據(jù)產(chǎn)生。為了消化這些數(shù)據(jù)，讓數(shù)據(jù)服務(wù)于企業(yè)，服務(wù)于用戶，制作分析報(bào)表是一個(gè)有效的工具。車企數(shù)據(jù)多存于云端，每次報(bào)表制作前，需要相關(guān)人員從存儲(chǔ)服務(wù)器中導(dǎo)出，導(dǎo)出過(guò)程溝通成本高，重復(fù)性操作較多，浪費(fèi)了很多人力成本。為了更方便快捷地進(jìn)行數(shù)據(jù)報(bào)表的制作，減少溝通成本，提高報(bào)表可復(fù)用性，自主報(bào)表系統(tǒng)應(yīng)運(yùn)而生。

1 自助報(bào)表系統(tǒng)簡(jiǎn)介

通過(guò)自助報(bào)表系統(tǒng)，制作者可以根據(jù)自己的要求，在web頁(yè)面上選擇對(duì)應(yīng)的數(shù)據(jù)類型，以及數(shù)據(jù)的篩選條件與需要的圖表類型，實(shí)時(shí)自動(dòng)生成對(duì)應(yīng)的報(bào)表。大大節(jié)省了數(shù)據(jù)導(dǎo)出時(shí)間、數(shù)據(jù)統(tǒng)計(jì)時(shí)間，以及溝通成本。

由于數(shù)據(jù)的實(shí)時(shí)性，可以一次制作周期性報(bào)表如周報(bào)、月報(bào)等，每次打開(kāi)對(duì)應(yīng)頁(yè)面則是最新周期的數(shù)據(jù)報(bào)表，大大減少重復(fù)性工作，把專注力投入到更重要的工作中去。由于圖表可配置，相關(guān)報(bào)表可以快速迭代，可以應(yīng)對(duì)更多場(chǎng)景的要求。

如圖1所示，系統(tǒng)分為3個(gè)頁(yè)面：報(bào)表頁(yè)面、數(shù)據(jù)源管理頁(yè)和圖表編輯頁(yè)面。

圖1 平臺(tái)頁(yè)面結(jié)構(gòu)

（1）數(shù)據(jù)源管理頁(yè)：包括工作表創(chuàng)建與字段設(shè)置的功能，工作表中包括了圖表可用的數(shù)值與維度的字段，其操作有數(shù)據(jù)提取，以及一些數(shù)據(jù)預(yù)先聚合等內(nèi)容。

（2）圖表編輯頁(yè)：可編輯多種圖表，其結(jié)構(gòu)主要包括智能顯示、度量篩選器、維度數(shù)值設(shè)置等。其中，圖表類型的智能顯示是指根據(jù)所選的維度和度量個(gè)數(shù)及其類型判斷可以生成的圖表類型并以高亮顯示縮略圖以供用戶選擇。篩選功能主要針對(duì)一些臟數(shù)據(jù)或者用戶不想看到的數(shù)據(jù)，為了突出意圖可以進(jìn)行相關(guān)的過(guò)濾從而更加方便地分析所生成的報(bào)表。

（3）儀表盤頁(yè)：主要為報(bào)表管理功能，報(bào)表即為多個(gè)圖表構(gòu)成?？梢栽趫?bào)表中對(duì)圖表進(jìn)行操作，包括位置調(diào)整，大小調(diào)整，針對(duì)單個(gè)圖標(biāo)鼠標(biāo)懸?？梢赃M(jìn)行下載、編輯以及刪除動(dòng)作。

2 方案與架構(gòu)

2.1 架構(gòu)介紹

本文中報(bào)表系統(tǒng)前端使用Vue為基礎(chǔ)框架，Vuex為狀態(tài)管理工具，ECharts為圖表庫(kù)。

Vue.js漸進(jìn)式框架進(jìn)行組件化開(kāi)發(fā)。Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫(kù)，也是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的Web界面的庫(kù)，擁有非常容易上手的API。

Vuex為此專門為Vue.js設(shè)計(jì)了狀態(tài)管理庫(kù)，利用Vue.js的細(xì)粒度數(shù)據(jù)響應(yīng)機(jī)制來(lái)進(jìn)行高效的狀態(tài)更新，它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。

ECharts是國(guó)內(nèi)一開(kāi)源的純JavaScript圖表庫(kù)，底層依賴輕量級(jí)Canvas類庫(kù)Zrender，對(duì)大數(shù)據(jù)可視化具有較好的支持。

2.2 報(bào)表頁(yè)面組件

如圖2所示，Login.vue組件控制用戶登錄登出狀態(tài)，登錄成功后會(huì)進(jìn)入到Panel.vue組件，通過(guò)List.vue可以在不同的報(bào)表之間切換，Views.vue為展示報(bào)表展示組件。

圖2 報(bào)表頁(yè)代碼結(jié)構(gòu)

2.3 圖表編輯頁(yè)組件

如圖3所示，Left.vue組件中集成了提供可選字段組件ItemList.vue，和篩選器組件Filter.vue，在Left.vue中實(shí)現(xiàn)控制數(shù)據(jù)的類型與范圍。Middle.vue組件中設(shè)置圖表維度數(shù)值項(xiàng)的組件Axis.vue和圖表預(yù)覽組件Preview.vue。在Right.vue組件中，可以設(shè)置圖表的標(biāo)題Title.vue和類型Type.vue，本文中報(bào)表系統(tǒng)支持包括折線圖在內(nèi)的7種圖表可以選擇。

圖3 圖表編輯頁(yè)代碼結(jié)構(gòu)

2.4 數(shù)據(jù)源頁(yè)面

如圖4所示，數(shù)據(jù)源頁(yè)面由邊欄Sider.vue與面板Panel.vue構(gòu)成。邊欄包括添加、編輯和刪除工作表等動(dòng)作。而面板可以過(guò)濾選擇Filter.vue工作表的字段，并且將其展示出來(lái)（Table.vue）。

圖4 數(shù)據(jù)源頁(yè)代碼結(jié)構(gòu)

2.5 圖表編輯模塊設(shè)計(jì)與實(shí)現(xiàn)

圖表編輯為自助報(bào)表系統(tǒng)前端的核心部分，其主要實(shí)現(xiàn)方式是通過(guò)拖拽單擊等易于理解的交互操作獲取查詢條件[1]，將其傳遞給對(duì)應(yīng)的接口，獲取生成圖表的原始數(shù)據(jù)，經(jīng)過(guò)對(duì)圖表模型的數(shù)據(jù)轉(zhuǎn)換，將結(jié)果傳遞給ECharts生成最后的圖表。流程如下圖5所示。

圖5 ECharts配置生成流程

ECharts生成圖表主要依賴于其Option配置項(xiàng)，由于ECharts有很多種格式，其所對(duì)應(yīng)的Option也不盡相同。若對(duì)每一種圖表編寫特定的Option代碼，會(huì)造成代碼冗余過(guò)多，維護(hù)困難。為解決這個(gè)問(wèn)題，本文通過(guò)研究ECharts的文擋，采用函數(shù)式編程方式，編寫了一套Option拼接模塊[2]，其可通過(guò)圖表的查詢參數(shù)和端口返回的數(shù)據(jù)生成對(duì)應(yīng)的Option，交給ECharts生成對(duì)于圖表。

3 結(jié)語(yǔ)

文本介紹了一種基于Vue的可視化報(bào)表系統(tǒng)前端設(shè)計(jì)與實(shí)現(xiàn)，用于替代傳統(tǒng)的報(bào)表制作方式，減少報(bào)表制作中重復(fù)環(huán)節(jié)，提高報(bào)表中各個(gè)圖表的可重用性，使得報(bào)表更易于分享與展示。