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

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

0 引言

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

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

1 系統(tǒng)設(shè)計(jì)目標(biāo)

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

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

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

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

（3）預(yù)覽自定制的可視化界面；

（4）發(fā)布自定制的可視化界面。系統(tǒng)功能結(jié)構(gòu)如圖1所示。

1.1 支持多種類型圖表和基礎(chǔ)地圖組件

如圖2所示，系統(tǒng)支持多種數(shù)據(jù)類型分析展示，除基本圖表外，還支持文字、滾動文字、表格、漏斗圖、雷達(dá)圖等多種顯示內(nèi)容，并提供地圖圖層。

圖1 系統(tǒng)功能結(jié)構(gòu)樹

圖2 支持的圖表類型

圖3 支持接入的數(shù)據(jù)源種類

1.2 支持?jǐn)?shù)據(jù)庫、CSV、API等多種數(shù)據(jù)源

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

2 系統(tǒng)設(shè)計(jì)實(shí)現(xiàn)

2.1 前端設(shè)計(jì)

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

2.1.1 管理界面組件

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

2.1.2 可視化編輯界面

圖4 可視化系統(tǒng)的三層架構(gòu)體系

圖5 管理界面組件樹

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

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

DataController.vue組件用于配置圖表數(shù)據(jù)源[11]。該組件設(shè)計(jì)并實(shí)現(xiàn)4種接入數(shù)據(jù)組件，并在每個接入組件中定義了一種數(shù)據(jù)格式轉(zhuǎn)換機(jī)制進(jìn)行數(shù)據(jù)匹配，通過數(shù)據(jù)匹配可以將外部常見的文本數(shù)據(jù)轉(zhuǎn)換為系統(tǒng)架構(gòu)內(nèi)部通用的數(shù)據(jù)格式，并將接入的數(shù)據(jù)進(jìn)行保存、展示和屬性配置，如圖8所示。

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

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

圖8 圖表樣式和數(shù)據(jù)源配置

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

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

CanvasController.vue組件可以修改畫布的大小、進(jìn)行顏色設(shè)置等。

通過使用Vue.js框架，每個組件既相互獨(dú)立，又相互耦合，通過改變數(shù)據(jù)，從而改變圖表渲染、圖表數(shù)據(jù)，真正實(shí)現(xiàn)了Vue.js的數(shù)據(jù)驅(qū)動。圖9～10為系統(tǒng)應(yīng)用事例。

2.2 后端設(shè)計(jì)

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

圖11 服務(wù)端架構(gòu)

用戶認(rèn)證采用基于加密token的認(rèn)證方式，對用戶名和用戶密碼進(jìn)行數(shù)據(jù)保護(hù)。可視化資源操作接口可以實(shí)現(xiàn)用戶可視化項(xiàng)目的增加、編輯、刪除、預(yù)覽和發(fā)布功能。數(shù)據(jù)源資源操作接口可以實(shí)現(xiàn)用戶自定義配置源的增加、編輯、刪除、有效性驗(yàn)證、數(shù)據(jù)獲取功能。文件資源接口支持將文件（包括圖片、CSV等）發(fā)送到服務(wù)器端統(tǒng)一進(jìn)行標(biāo)識后分配給可視化項(xiàng)目或數(shù)據(jù)源使用。

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

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

3 系統(tǒng)設(shè)計(jì)的主要技術(shù)

系統(tǒng)基于Vue.js[5-6]前端架構(gòu)融合Echarts[7]開源圖表庫及MongoDB[8]數(shù)據(jù)庫構(gòu)建。

3.1 Echarts圖表庫

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

3.2 Vue.js

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

圖12 數(shù)據(jù)流設(shè)計(jì)

圖13 Vue.js組件化示意

3.3 VueX[10]

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

3.4 MongoDB

MongoDB是一個介于NoSQL數(shù)據(jù)庫和MySQL數(shù)據(jù)庫之間的數(shù)據(jù)存儲系統(tǒng)，沒有嚴(yán)格的數(shù)據(jù)格式，但又支持復(fù)雜的數(shù)據(jù)查詢?？梢暬?xiàng)目、數(shù)據(jù)源等數(shù)據(jù)實(shí)體結(jié)構(gòu)變化較大，易用JSON格式表示，MongoDB非常適合存儲JSON格式的數(shù)據(jù)。

4 結(jié)語

傳統(tǒng)數(shù)據(jù)分析可視化需要專業(yè)技術(shù)人員針對不同場景進(jìn)行圖表開發(fā)，大量圖表及特效開發(fā)周期長，前后端接口聯(lián)調(diào)也同樣耗時(shí)耗力。基于組件化的數(shù)據(jù)可視化系統(tǒng)HikVis解決了這一問題，該系統(tǒng)不僅不局限于數(shù)據(jù)可視化展示，還可快速搭建用戶自定義式的網(wǎng)頁構(gòu)建，包含數(shù)據(jù)驅(qū)動式的渲染設(shè)計(jì)、獨(dú)特的數(shù)據(jù)收集系統(tǒng)、快速制作自定義式網(wǎng)頁數(shù)據(jù)可視化，無需編程即可一鍵制作、預(yù)覽和發(fā)布用戶自定義網(wǎng)頁數(shù)據(jù)可視化。