基于組件化的數據可視化系統設計與實現

江 婷，林嘉琦，馬建雄，高齊琦

（中國電子科技集團第五十二研究所，浙江 杭州 310000）

0 引言

隨著大數據時代的到來，從多種類型的數據中，快速獲得有價值信息變得越來越重要。大數據技術[1-2]由數據采集、存儲、管理、分析挖掘、可視化等技術集成。其中數據可視化[3-4]是將不同類型的數據通過多樣、適當的方式呈現出來，讓人與數據真正實現溝通、交流，并且能夠讓人理解數據背后蘊藏的規(guī)律和價值，從而幫助決策者提高決策效率。

大多數網站制作時需要根據設計進行代碼編寫，在展示數據可視化時更是需要大量的圖表，大大增加了技術人員的開發(fā)難度，導致開發(fā)效率降低，后期維護成本提升。同時現有的數據可視化技術，支持的組件少，展示數據維度不夠，支持的用戶交互較少，難以滿足自定義網頁功能需求。本文設計了基于組件化的數據可視化系統HikVis，它是一款定位于為各種應用場景的前端數據可視化軟件產品，通過快速搭建交互式實時數據可視化幫助業(yè)務人員發(fā)現、診斷問題。

1 系統設計目標

將單一的數據轉化為豐富多彩的可視化圖表，并支持實時展示數據給用戶；能在簡單的一頁中展示數據之間的層次與關聯，幫助用戶快速搭建單頁面以及指揮中心、地理分析、實時監(jiān)控、態(tài)勢展示等場景頁面；純拖拽式圖形化界面，無需編程也可快速實現，提供多種頁面元素和相應的配置方式。

系統分為四個頁面：管理界面、編輯界面、預覽界面、可視化界面。每個頁面根據功能分為多個組件，每個組件通過VueX通信獲取最新數據。

（1）管理界面：包括用戶登錄信息、用戶配置數據源、用戶添加自定制可視化界面、用戶自定制可視化列表、用戶對當前已有的自定制可視化增刪改查等功能；

（2）編輯可視化界面：支持多種圖表類型，支持拖拽圖表至畫布、畫布編輯、各類型圖表樣式及數據編輯、圖層編輯、拖拽時對齊吸附、導入導出自定制的可視化數據和配置數據源；

（3）預覽自定制的可視化界面；

（4）發(fā)布自定制的可視化界面。系統功能結構如圖1所示。

1.1 支持多種類型圖表和基礎地圖組件

如圖2所示，系統支持多種數據類型分析展示，除基本圖表外，還支持文字、滾動文字、表格、漏斗圖、雷達圖等多種顯示內容，并提供地圖圖層。

圖1 系統功能結構樹

圖2 支持的圖表類型

圖3 支持接入的數據源種類

1.2 支持數據庫、CSV、API等多種數據源

如圖3所示，系統配有豐富的數據源配置，支持處理多種數據源。其能夠接入多種數據庫類型，包括本地CSV上傳和API接入，支持各大類數據實時計算、實時監(jiān)控，有利于充分發(fā)揮大數據計算能力。

2 系統設計實現

2.1 前端設計

系統前端采用Vue.js漸進式框架進行組件化開發(fā)。Vue.js是一個輕巧、高性能、可組件化的MVVM庫，也是一個構建數據驅動的Web界面的庫，擁有非常容易上手的API。系統的操作界面完全基于瀏覽器，體系結構采用了先進的用戶界面層、業(yè)務邏輯層、數據存儲層三層結構系統，如圖4所示。

2.1.1 管理界面組件

如圖5所示，Longin.vue組件控制用戶登錄登出狀態(tài)，登錄成功后會進入Index.vue組件，通過路由可以進入可視化列表MyVis.vue組件和數據源列表MyData.vue組件，查看用戶創(chuàng)建的可視化列表和數據源列表。在可視化列表MyVis.vue組件嵌套增加可視化Add.vue組件，通過Add.vue組件，用戶可新增可視化方案；在數據源列表MyData.vue組件嵌套增加數據源組件Adddata.vue組件，通過Adddata.vue組件，用戶可新增用戶可視化數據源。

2.1.2 可視化編輯界面

圖4 可視化系統的三層架構體系

圖5 管理界面組件樹

可視化編輯界面組件如圖6所示。

在Left.vue組件中，集成了Echarts的24種不同類型圖表和12種前端常用圖表，如邊框、計數器、時間器等，這些圖表通過Orign.vue組件封裝，成為點擊可克隆拖動組件。當Left.vue中圖表組件被點擊復制拖動至畫布范圍內，VueX將記錄該圖表的類型、位置、大小等信息，并傳遞至Middle.vue，Middle.vue下的Drag.vue組件將該圖表封裝成畫布范圍內可拖拽和八個方向改變圖表大小的div，并通過Draggeble.vue解析成相應的圖表，渲染至畫布上；之后VueX將該圖表的信息傳遞至Right.vue組件，Right.vue下的DataStyleController.vue組件判斷解析該圖表，從而顯示該圖表的樣式和數據，并通過DataController.vue和StyleController.vue組件顯示，通過以上兩個組件還可以更改圖表數據及樣式。圖7為可視化編輯界面邏輯示意圖。

DataController.vue組件用于配置圖表數據源[11]。該組件設計并實現4種接入數據組件，并在每個接入組件中定義了一種數據格式轉換機制進行數據匹配，通過數據匹配可以將外部常見的文本數據轉換為系統架構內部通用的數據格式，并將接入的數據進行保存、展示和屬性配置，如圖8所示。

圖6 可視化編輯界面部分組件樹

圖7 可視化編輯界面邏輯示意圖

圖8 圖表樣式和數據源配置

圖9 用戶行為的可視化分析

圖10 節(jié)點的可視化分析

CanvasController.vue組件可以修改畫布的大小、進行顏色設置等。

通過使用Vue.js框架，每個組件既相互獨立，又相互耦合，通過改變數據，從而改變圖表渲染、圖表數據，真正實現了Vue.js的數據驅動。圖9～10為系統應用事例。

2.2 后端設計

如圖11所示，系統后端使用REST Server保存用戶創(chuàng)建資源和用戶操作，統一管理用戶認證、數據可視化項目、用戶配置數據源、文件和圖片，使用數據庫連接池技術保證多用戶操作場景下用戶資源的正常訪問。REST Server提供RESTful風格的API與前端應用交互，主要包括用戶認證、可視化資源操作、數據庫資源操作、文件資源操作、異常資源操作等接口。

圖11 服務端架構

用戶認證采用基于加密token的認證方式，對用戶名和用戶密碼進行數據保護?？梢暬Y源操作接口可以實現用戶可視化項目的增加、編輯、刪除、預覽和發(fā)布功能。數據源資源操作接口可以實現用戶自定義配置源的增加、編輯、刪除、有效性驗證、數據獲取功能。文件資源接口支持將文件（包括圖片、CSV等）發(fā)送到服務器端統一進行標識后分配給可視化項目或數據源使用。

在系統數據流設計中，提出了“狀態(tài)收集器”這一理念，即用戶操作及更改的數據都將暫時集中于VueX下的“狀態(tài)收集器”中，每3秒觸發(fā)一次收集器，收集該當前可視化所有信息，并通過后端API保存至數據庫中。系統的數據流向如圖12所示。

該數據流向設計的優(yōu)勢在于用戶操作和向后臺傳輸數據為多線程操作，互不干擾，用戶無需擔心頻繁操作系統而丟失已創(chuàng)建的可視化信息，達到數據保護功能。

3 系統設計的主要技術

系統基于Vue.js[5-6]前端架構融合Echarts[7]開源圖表庫及MongoDB[8]數據庫構建。

3.1 Echarts圖表庫

Echarts是一個免費開源的可視化圖表組件。Echarts底層依賴輕量級的Canvas類庫ZRender，提供直觀、生動、可交互、可高度個性化定制的可視化圖表。Echarts4.0提供了常規(guī)的折線圖、柱狀圖、散點圖、餅圖、K線圖，用于地理數據可視化的地圖、熱力圖、線圖，用于關系數據可視化的關系圖、treemap，還有用于BI的漏斗圖。

3.2 Vue.js

Vue.js是一款輕量級的JavaScript庫，具有功能豐富、使用簡潔且清晰的文檔。Vue.js的核心思想是“數據驅動的組件化系統”，采用MVVM架構去描述數據與界面的關系，采用嵌套的組件樹來描述界面。除此之外，Vue的組件化也是一個核心功能，即將用戶界面拆分成一系列相互關聯的組件，每個組件相互獨立，具有相互獨立的業(yè)務邏輯，卻又能通過數據傳遞和其他組件相互聯系，如圖13所示。Vue.js具有MVVM思想，組件化開發(fā)，輕量級并且能與其他庫或項目整合優(yōu)勢[9]，故成為越來越熱門的前端開發(fā)框架。

圖12 數據流設計

圖13 Vue.js組件化示意

3.3 VueX[10]

由于Vue.js的數據流為單向數據流，在遇到多個組件共享同一狀態(tài)時，傳參的方法對于多層嵌套的組件將會非常繁瑣，并且兄弟組件間的狀態(tài)傳遞基本無法解決。VueX為此專門為Vue.js設計了狀態(tài)管理庫，利用 Vue.js的細粒度數據響應機制來進行高效的狀態(tài)更新，它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。

3.4 MongoDB

MongoDB是一個介于NoSQL數據庫和MySQL數據庫之間的數據存儲系統，沒有嚴格的數據格式，但又支持復雜的數據查詢?？梢暬椖?、數據源等數據實體結構變化較大，易用JSON格式表示，MongoDB非常適合存儲JSON格式的數據。

4 結語

傳統數據分析可視化需要專業(yè)技術人員針對不同場景進行圖表開發(fā)，大量圖表及特效開發(fā)周期長，前后端接口聯調也同樣耗時耗力?；诮M件化的數據可視化系統HikVis解決了這一問題，該系統不僅不局限于數據可視化展示，還可快速搭建用戶自定義式的網頁構建，包含數據驅動式的渲染設計、獨特的數據收集系統、快速制作自定義式網頁數據可視化，無需編程即可一鍵制作、預覽和發(fā)布用戶自定義網頁數據可視化。