一種汽車數據自助報表前端實現方案

溫豐蔚，張送，韋通明，溫麗梅，韋統邊

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

引言

近年來，隨著汽車數字化網聯化的發展，汽車變得更為智能，也有更多數據產生。為了消化這些數據，讓數據服務于企業，服務于用戶，制作分析報表是一個有效的工具。車企數據多存于云端，每次報表制作前，需要相關人員從存儲服務器中導出，導出過程溝通成本高，重復性操作較多，浪費了很多人力成本。為了更方便快捷地進行數據報表的制作，減少溝通成本，提高報表可復用性，自主報表系統應運而生。

1 自助報表系統簡介

通過自助報表系統，制作者可以根據自己的要求，在web頁面上選擇對應的數據類型，以及數據的篩選條件與需要的圖表類型，實時自動生成對應的報表。大大節省了數據導出時間、數據統計時間，以及溝通成本。

由于數據的實時性，可以一次制作周期性報表如周報、月報等，每次打開對應頁面則是最新周期的數據報表，大大減少重復性工作，把專注力投入到更重要的工作中去。由于圖表可配置，相關報表可以快速迭代，可以應對更多場景的要求。

如圖1所示，系統分為3個頁面：報表頁面、數據源管理頁和圖表編輯頁面。

圖1 平臺頁面結構

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

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

（3）儀表盤頁：主要為報表管理功能，報表即為多個圖表構成。可以在報表中對圖表進行操作，包括位置調整，大小調整，針對單個圖標鼠標懸停可以進行下載、編輯以及刪除動作。

2 方案與架構

2.1 架構介紹

本文中報表系統前端使用Vue為基礎框架，Vuex為狀態管理工具，ECharts為圖表庫。

Vue.js漸進式框架進行組件化開發。Vue.js是一個輕巧、高性能、可組件化的MVVM庫，也是一個構建數據驅動的Web界面的庫，擁有非常容易上手的API。

Vuex為此專門為Vue.js設計了狀態管理庫，利用Vue.js的細粒度數據響應機制來進行高效的狀態更新，它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。

ECharts是國內一開源的純JavaScript圖表庫，底層依賴輕量級Canvas類庫Zrender，對大數據可視化具有較好的支持。

2.2 報表頁面組件

如圖2所示，Login.vue組件控制用戶登錄登出狀態，登錄成功后會進入到Panel.vue組件，通過List.vue可以在不同的報表之間切換，Views.vue為展示報表展示組件。

圖2 報表頁代碼結構

2.3 圖表編輯頁組件

如圖3所示，Left.vue組件中集成了提供可選字段組件ItemList.vue，和篩選器組件Filter.vue，在Left.vue中實現控制數據的類型與范圍。Middle.vue組件中設置圖表維度數值項的組件Axis.vue和圖表預覽組件Preview.vue。在Right.vue組件中，可以設置圖表的標題Title.vue和類型Type.vue，本文中報表系統支持包括折線圖在內的7種圖表可以選擇。

圖3 圖表編輯頁代碼結構

2.4 數據源頁面

如圖4所示，數據源頁面由邊欄Sider.vue與面板Panel.vue構成。邊欄包括添加、編輯和刪除工作表等動作。而面板可以過濾選擇Filter.vue工作表的字段，并且將其展示出來（Table.vue）。

圖4 數據源頁代碼結構

2.5 圖表編輯模塊設計與實現

圖表編輯為自助報表系統前端的核心部分，其主要實現方式是通過拖拽單擊等易于理解的交互操作獲取查詢條件[1]，將其傳遞給對應的接口，獲取生成圖表的原始數據，經過對圖表模型的數據轉換，將結果傳遞給ECharts生成最后的圖表。流程如下圖5所示。

圖5 ECharts配置生成流程

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

3 結語

文本介紹了一種基于Vue的可視化報表系統前端設計與實現，用于替代傳統的報表制作方式，減少報表制作中重復環節，提高報表中各個圖表的可重用性，使得報表更易于分享與展示。