王薈奧,蔡永香,楊岸霖,游小玲,何宗宜

(長江大學(xué) 地球科學(xué)學(xué)院,武漢 430100)

1 概述

大屏數(shù)據(jù)可視化是以大屏為主要展示載體進(jìn)行數(shù)據(jù)的可視化呈現(xiàn).隨著大數(shù)據(jù)分析技術(shù)的流行,行業(yè)應(yīng)用中進(jìn)行數(shù)據(jù)分析及大屏可視化展示以提供決策支持的需求日益迫切.國內(nèi)外許多互聯(lián)網(wǎng)公司都有很多有用的可視化實(shí)踐,以D3.js為例,其由Mike Bostock和斯坦?？梢暬M的Jeff Heer 制作,而以此為基礎(chǔ)開發(fā)的可視化工具舉不勝舉,如Data.js、RAWGraphs 等[1].

隨著可視化的需求越來越大,出現(xiàn)了一些商業(yè)性可視化組件庫,如阿里巴巴旗下的DataV 是專業(yè)級大數(shù)據(jù)可視化工具,有圖形化編輯界面,支持多種數(shù)據(jù)源,能靈活部署及發(fā)布等,但免費(fèi)版本的功能受限,商業(yè)應(yīng)用的費(fèi)用也很高.也有一些開源性可視化組件庫,如百度旗下的Echarts,有著豐富的可視化類型,能進(jìn)行深度的交互式數(shù)據(jù)探索,支持多維數(shù)據(jù)、動(dòng)態(tài)數(shù)據(jù)等,有著豐富的視覺編碼手段,但必須通過程序編碼進(jìn)行定制開發(fā).

由于系統(tǒng)數(shù)據(jù)類型、分析需求各不相同,可視化表達(dá)的內(nèi)容及方式不同,定制開發(fā)實(shí)現(xiàn)成本較高、運(yùn)維管理復(fù)雜.如果能建成一個(gè)數(shù)據(jù)易用可視化工具,能借助可視化組件,基于數(shù)據(jù)面板配置管理數(shù)據(jù),快速實(shí)現(xiàn)數(shù)據(jù)可視化,就能夠大大節(jié)省成本,提高工作效率.

本文從方便實(shí)用角度出發(fā),著重開發(fā)出一個(gè)拖拽式大屏數(shù)據(jù)可視化工具,使用數(shù)據(jù)連接面板、可視化組件庫、場景模板以及發(fā)布工具,通過對可視化組件的拖拽式操作,讓沒有編程基礎(chǔ)的人也能快速的將數(shù)據(jù)可視化,做出高大上的可視化應(yīng)用.

該工具命名因研究辦公室名為C317,該工具主要特點(diǎn)是數(shù)據(jù)可視化頁面,數(shù)據(jù)的英文是Data,可視化頁面用UI 表示,所以取名為C317DataUI.

2 系統(tǒng)統(tǒng)架構(gòu)與開發(fā)技術(shù)

2.1 系統(tǒng)整體架構(gòu)

本系統(tǒng)采用B/S 結(jié)構(gòu)[2],在該結(jié)構(gòu)的基礎(chǔ)上將系統(tǒng)分為3 層:數(shù)據(jù)層、服務(wù)層、表現(xiàn)層,如圖1所示.

圖1 系統(tǒng)3 層架構(gòu)圖

(1)數(shù)據(jù)層

數(shù)據(jù)層主要的功能是給服務(wù)層中的業(yè)務(wù)邏輯提供各種類型的數(shù)據(jù)支持,它的主要任務(wù)是數(shù)據(jù)存儲(chǔ)與管理,并將數(shù)據(jù)傳遞給上層的業(yè)務(wù)邏輯層進(jìn)行處理.

(2)服務(wù)層

服務(wù)層是處于應(yīng)用程序數(shù)據(jù)層和表現(xiàn)層之間.服務(wù)層隱藏了業(yè)務(wù)邏輯層的細(xì)節(jié),在內(nèi)部組織業(yè)務(wù)微服務(wù),采用封裝和接口的形式,提供粗粒度、面向表現(xiàn)層的服務(wù).系統(tǒng)所有的交互都是從表現(xiàn)層進(jìn)入.

(3)表現(xiàn)層

表現(xiàn)層位于3 層架構(gòu)的最上層,它是直接與客戶端交互的一層.它負(fù)責(zé)接收客戶端的請求,解析客戶端的請求,獲取數(shù)據(jù)后,再返回給客戶端,進(jìn)而完成了一層數(shù)據(jù)請求[3].

2.2 主要開發(fā)技術(shù)

考慮到要建成可視化工具C317DataUI的先進(jìn)性與科學(xué)性,我們采用了成熟的前后臺(tái)框架與技術(shù)來開發(fā).前端采用Vue.js 框架、Element 組件庫;后端采用Koa 框架實(shí)現(xiàn)系統(tǒng)服務(wù),Spring Boot 框架實(shí)現(xiàn)多源數(shù)據(jù)連接Web 服務(wù),采用JSON 格式進(jìn)行數(shù)據(jù)傳輸,提高數(shù)據(jù)傳輸效率.

Vue.js 是目前流行的創(chuàng)建界面的漸進(jìn)式前端框架.它完全能夠驅(qū)動(dòng)使用Vue 生態(tài)系統(tǒng)支持的單個(gè)文件組件和庫開發(fā)的復(fù)雜單頁應(yīng)用程序[4],而Vuex 是一個(gè)專為Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式.它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化[5].Element 是一套開源的組件庫,旨在快速搭建頁面,并提供了配套的設(shè)計(jì)資源,能充分滿足可定制化的需求.

Koa 是一個(gè)新的后端框架,它沒有捆綁任何中間件,而是提供了一套優(yōu)雅的方法,讓開發(fā)者能快速而愉快地編寫服務(wù)端應(yīng)用程序[6].Spring Boot 不需要進(jìn)行繁瑣的定義配置,而是使用一種自動(dòng)配置方式,目前已成為快速應(yīng)用程序開發(fā)的領(lǐng)導(dǎo)者.

3 關(guān)鍵問題及解決方案

設(shè)計(jì)構(gòu)建可視化工具C317DataUI的目的是實(shí)現(xiàn)數(shù)據(jù)快捷可視化,減少用戶開發(fā)工作量,按照簡單易用的原則進(jìn)行軟件開發(fā).主要實(shí)現(xiàn)的功能需求有:可視化組件調(diào)用、配置、布局;頁面編輯與發(fā)布,模板的發(fā)布、使用、編輯;多源數(shù)據(jù)的上傳、管理與連接,以及用戶信息的管理等功能.其中涉及到的關(guān)鍵問題主要包括以下兩個(gè)方面.

(1)多源數(shù)據(jù)配置問題

為了讓C317DataUI 簡單易用,設(shè)計(jì)采用傻瓜式的配置數(shù)據(jù)方式,不需編寫代碼,就能靈活處理不同數(shù)據(jù)源,支持MySQL、SQL Server 等常見關(guān)系型數(shù)據(jù)庫,讓需要表達(dá)的數(shù)據(jù)能靈活與可視化組件連接.并且在交互過程中,能對圖表中的數(shù)據(jù)進(jìn)行聯(lián)動(dòng)修改,而如何連接、統(tǒng)一處理不同來源的數(shù)據(jù)是解決問題的關(guān)鍵.

我們的策略是將所有數(shù)據(jù)連接并存儲(chǔ)到MongoDB數(shù)據(jù)庫,然后轉(zhuǎn)換成一種公共的數(shù)據(jù)格式來可視化表達(dá),這樣就只需要對公共格式數(shù)據(jù)的可視化表達(dá)編寫代碼實(shí)現(xiàn)即可,可以提高代碼的復(fù)用性.此外,對公共數(shù)據(jù)表設(shè)置監(jiān)聽,當(dāng)數(shù)據(jù)表被修改后,用代碼實(shí)現(xiàn)源數(shù)據(jù)的聯(lián)動(dòng)更新.

(2)可視化組件配置問題

同樣,為了讓C317DataUI 簡單易用,我們設(shè)計(jì)對可視化組件采用拖拽式布局,自動(dòng)生成頁面代碼.由于每個(gè)可視化組件都有許多的屬性,如顏色、位置、大小、數(shù)據(jù)綁定、字體等,且組件不同,屬性的個(gè)數(shù)和類別也有所不同,如何在盡可能降低代碼量的情況下,實(shí)現(xiàn)屬性快速配置并自動(dòng)生成頁面代碼是解決問題的關(guān)鍵.

我們采用分類處理的策略,即按屬性性質(zhì)對屬性進(jìn)行分類,分為通用屬性和個(gè)性化屬性,并分開編碼,開發(fā)出不同屬性的配置組件.可視化組件屬性配置時(shí),通過調(diào)用相應(yīng)的配置組件,從其接口獲得配置參數(shù)來完成,從而減少編碼的工作量.

4 系統(tǒng)總體設(shè)計(jì)與實(shí)現(xiàn)

4.1 功能模塊設(shè)計(jì)

考慮到用戶可視化的需求及軟件的簡單易用,按照系統(tǒng)功能類別我們將系統(tǒng)劃分為我的作品、創(chuàng)意模板、數(shù)據(jù)管理和用戶管理4 個(gè)大的功能模塊,其中每個(gè)大功能模塊由幾個(gè)小的功能模塊組成,如圖2所示.

圖2 系統(tǒng)功能模塊圖

4.2 數(shù)據(jù)庫設(shè)計(jì)

C317DataUI 選取了當(dāng)下流行的MongoDB 數(shù)據(jù)庫來進(jìn)行數(shù)據(jù)的存取與管理.

MongoDB 是一個(gè)基于分布式文件存儲(chǔ)的數(shù)據(jù)庫,是非關(guān)系數(shù)據(jù)庫當(dāng)中功能最豐富,最像關(guān)系數(shù)據(jù)庫的數(shù)據(jù)庫[7].考慮到C317DataUI為Web 端工程,對數(shù)據(jù)存取的速度要求較高,且由于數(shù)據(jù)源多樣,有不同的數(shù)據(jù)庫數(shù)據(jù),有Excel 表格數(shù)據(jù)等,因此對數(shù)據(jù)庫的可擴(kuò)展性要求高,MongoDB 數(shù)據(jù)庫以其巨大的優(yōu)勢能夠勝任本項(xiàng)目的各項(xiàng)需求.

(1)具體結(jié)構(gòu)設(shè)計(jì)

本數(shù)據(jù)庫按照項(xiàng)目實(shí)際需求定義了5 個(gè)集合分別是用戶集合(user)、圖片集合(images)、頁面集合(pages)、數(shù)據(jù)集合(data)、數(shù)據(jù)庫連接信息集合(jdbc).

其中用戶集合(user) 存儲(chǔ)用戶注冊的相關(guān)信息.當(dāng)用戶登錄時(shí),將按用戶輸入的用戶名和密碼與用戶集合中的數(shù)據(jù)進(jìn)行對比驗(yàn)證,實(shí)現(xiàn)用戶登錄等功能.圖片集合(images)主要存儲(chǔ)用戶上傳的圖片數(shù)據(jù).頁面集合(pages)是最重要且最復(fù)雜的集合,存儲(chǔ)頁面中所有信息,例如在編輯器中添加的組件相關(guān)信息:大小、位置、圖表標(biāo)題等,一條記錄代表一個(gè)頁面.數(shù)據(jù)集合(data)主要存儲(chǔ)上傳的數(shù)據(jù)信息,這些數(shù)據(jù)與可視化組件進(jìn)行數(shù)據(jù)綁定后就能進(jìn)行可視化顯示.數(shù)據(jù)庫連接信息集合(jdbc)負(fù)責(zé)記錄多源數(shù)據(jù)庫信息的存儲(chǔ),如數(shù)據(jù)庫類型、名稱、IP 地址、端口號、用戶名、密碼等相關(guān)信息.

4.3 主要功能實(shí)現(xiàn)

(1)多源數(shù)據(jù)配置

多源數(shù)據(jù)配置主要分為數(shù)據(jù)連接與存儲(chǔ)、數(shù)據(jù)轉(zhuǎn)換與綁定、數(shù)據(jù)監(jiān)聽與更新3 個(gè)部分,如圖3所示.

圖3 多源數(shù)據(jù)配置

1)數(shù)據(jù)連接與存儲(chǔ)

多源可視化數(shù)據(jù)主要分為Excel 數(shù)據(jù)和不同種類的數(shù)據(jù)庫數(shù)據(jù)兩大類.其中Excel 數(shù)據(jù),通過Excel 插件(x-data-spreadsheet)實(shí)現(xiàn)本地Excel 文件的連接與讀取,然后調(diào)用數(shù)據(jù)存儲(chǔ)接口存儲(chǔ)在MongoDB 數(shù)據(jù)庫中,供可視化組件使用.

數(shù)據(jù)庫數(shù)據(jù)使用JDBC 進(jìn)行連接,并用查詢語句遍歷數(shù)據(jù)庫,將連接信息與數(shù)據(jù)集存儲(chǔ)在MongoDB 數(shù)據(jù)庫中,目前已經(jīng)支持的關(guān)系型數(shù)據(jù)庫有MySQL、Oracle、PostgreSQL、SQL Server 等.針對不同的數(shù)據(jù)庫,需要單獨(dú)創(chuàng)建一個(gè)以JDBC 連接數(shù)據(jù)庫的程序,下面以連接MySQL 數(shù)據(jù)庫為例來進(jìn)行說明.

首先采用forName 方法將Driver 類的實(shí)例注冊到DriverManager 類中來加載JDBC 驅(qū)動(dòng)程序,然后創(chuàng)建數(shù)據(jù)庫的連接獲得Connection 對象,使用Driver-Manager的getConnectin 方法傳入數(shù)據(jù)庫的路徑、用戶名和密碼;再通過executeQuery 方法來查詢數(shù)據(jù)庫,返回結(jié)果集ResultSet,最后遍歷結(jié)果集得到數(shù)據(jù)庫數(shù)據(jù)存入MongoDB 數(shù)據(jù)庫中.

2)數(shù)據(jù)轉(zhuǎn)換與綁定

從MongoDB 數(shù)據(jù)庫中讀取需要可視化表達(dá)的數(shù)據(jù),利用格式轉(zhuǎn)換函數(shù)將其轉(zhuǎn)化為一種公共數(shù)據(jù)格式,如格式1 所示.將其與可視化組件的數(shù)據(jù)源綁定,即可實(shí)現(xiàn)數(shù)據(jù)的可視化顯示.

格式1.公共數(shù)據(jù)格式columns:[“日期”“訪問用戶”“下單用戶”“下單率”],rows:[{日期:“1/1”,訪問用戶:1 393,下單用戶:1 093,下單率:0.32 },{日期:“1/2”,訪問用戶:3 530,下單用戶:3 230,下單率:0.26 }]

3)數(shù)據(jù)監(jiān)聽與更新

對公共格式數(shù)據(jù)設(shè)置數(shù)據(jù)監(jiān)聽,當(dāng)數(shù)據(jù)發(fā)生改變時(shí),與公共格式數(shù)據(jù)綁定的可視化圖表也會(huì)發(fā)生相應(yīng)的改變.需要同步更新數(shù)據(jù)源時(shí),代碼修改MongoDB數(shù)據(jù)庫中對應(yīng)的數(shù)據(jù)庫.此時(shí),實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽采用的是Vue.js 中的watch 函數(shù),起監(jiān)聽數(shù)據(jù)變化的作用.

(2)可視化組件配置

可視化組件配置主要包括組件屬性分類、分類后屬性配置、頁面發(fā)布與生成3 個(gè)部分.

1)組件屬性分類

Echarts的可視化組件是通過JSON 格式的數(shù)據(jù)項(xiàng)實(shí)現(xiàn)屬性配置,不同的組件其配置項(xiàng)大同小異,我們把相同的屬性配置分為同一類來實(shí)現(xiàn),如折線圖、柱狀圖、K 線圖等,這一類圖表都同樣具有X、Y 軸,因此把X、Y 軸屬性配置分為一類;所有圖表都有圖形樣式屬性“itemStyle”,包括圖形顏色、圖形類型、描邊顏色、描邊寬度、描邊類型、陰影顏色、透明度等,將其分為一類;每一類進(jìn)行組件式開發(fā)實(shí)現(xiàn),分別稱之為XY 配置組件、圖形樣式配置組件等,并提供傳輸參數(shù)的接口.在對具有X、Y 軸屬性這類圖表組件進(jìn)行配置時(shí),通過連接XY 配置組件,獲取組件的接口數(shù)據(jù)來實(shí)現(xiàn)屬性的配置;對圖形樣式修改時(shí)亦如此,連接圖形樣式配置組件,獲取組件的接口數(shù)據(jù)來實(shí)現(xiàn)樣式配置.

2)分類后屬性配置

Vue 官方文檔中,組件式開發(fā)中props 變量用來實(shí)現(xiàn)可視化圖表組件與配置組件之間參數(shù)的傳遞.可視化圖表組件屬性配置時(shí)采用JSON 數(shù)據(jù)格式,使用props 變量在對應(yīng)配置組件接口處接收數(shù)據(jù),實(shí)現(xiàn)參數(shù)的傳遞.當(dāng)配置組件接口數(shù)據(jù)被修改,接收數(shù)據(jù)的可視化組件屬性配置相應(yīng)被修改,可視化圖表也會(huì)發(fā)生相應(yīng)的變化,最終所有配置數(shù)據(jù)存入MongoDB 數(shù)據(jù)庫中.

如圖4所示,可視化組件1 有A、B 類屬性需要配置,可視化組件2 有B、C 類屬性需要配置,屬性被分成了配置組件A、配置組件B和配置組件C 三類,通過組件式開發(fā)實(shí)現(xiàn).可視化組件1 配置屬性時(shí),通過props 分別連接配置組件A和配置組件B,獲取接口數(shù)據(jù)實(shí)現(xiàn)屬性配置;可視化組件2 配置屬性時(shí),通過props分別連接配置組件B和配置組件C,獲取接口數(shù)據(jù)實(shí)現(xiàn)屬性配置,這樣大大提高了代碼的復(fù)用性,不用每一個(gè)可視化組件配置時(shí)都單獨(dú)實(shí)現(xiàn)一次.

圖4 屬性配置原理圖

3)頁面生成與發(fā)布

用戶按UI 設(shè)計(jì)將布局好的可視化組件配置后,根據(jù)id 從MongoDB 數(shù)據(jù)庫中讀取頁面的JSON 數(shù)據(jù),數(shù)據(jù)包含可視化圖表組件的名稱、位置、樣式、數(shù)據(jù)等;利用Vue的動(dòng)態(tài)組件特性,即,name為圖表組件的名稱,根據(jù)name的值顯示對應(yīng)組件到頁面上[8],實(shí)現(xiàn)頁面的生成.

使用Vue Router 實(shí)現(xiàn)新頁面的發(fā)布,它是Vue 官方提供的路由管理器,適合于構(gòu)建單頁Web 應(yīng)用,開發(fā)人員需要做的是將組件映射到路由,然后告訴路由渲染頁面的規(guī)則[9].該工具中發(fā)布頁面路徑格式一般為“http://localhost/editor?id”,其中id為編輯頁面的唯一標(biāo)識(shí),從而實(shí)現(xiàn)不同頁面的發(fā)布.

4.4 系統(tǒng)成果展示

可視化工具C317DataUI 開發(fā)完成后,這里對部分頁面進(jìn)行成果展示.

進(jìn)入系統(tǒng)后,系統(tǒng)默認(rèn)打開系統(tǒng)首頁,點(diǎn)擊新建頁面跳轉(zhuǎn)到編輯頁面.

(1)組件調(diào)用與屬性配置

進(jìn)入系統(tǒng)編輯頁面后,左邊是組件列表,點(diǎn)擊所要調(diào)用的組件,組件就會(huì)出現(xiàn)在中間畫布上;在畫布上的組件可以通過鼠標(biāo)點(diǎn)擊拖拽組件改變其位置和大小;右側(cè)為組件屬性編輯,可以對組件進(jìn)行樣式編輯、數(shù)據(jù)綁定,如圖5所示.

圖5 組件調(diào)用與編輯界面

(2)多源數(shù)據(jù)連接頁面

數(shù)據(jù)分為文件數(shù)據(jù)和數(shù)據(jù)庫數(shù)據(jù),其中文件數(shù)據(jù)包括圖片數(shù)據(jù)和表格數(shù)據(jù).表格數(shù)據(jù)上傳時(shí)點(diǎn)擊“ 導(dǎo)入excel” 按鈕,圖片數(shù)據(jù)上傳時(shí)點(diǎn)擊“點(diǎn)擊上傳” 按鈕打開本地文件夾進(jìn)行上傳;而數(shù)據(jù)庫數(shù)據(jù)通過連接數(shù)據(jù)庫進(jìn)行導(dǎo)入,點(diǎn)擊“ 連接數(shù)據(jù)庫” 按鈕進(jìn)行數(shù)據(jù)庫的配置和連接,如圖6所示.

圖6 多源數(shù)據(jù)連接界面

(3)創(chuàng)意模板頁面

C317DataUI 提供了一些創(chuàng)意模板,方便用戶參考、使用.用戶可以預(yù)覽和使用模板.將鼠標(biāo)移到作品上方會(huì)出現(xiàn)預(yù)覽按鈕,點(diǎn)擊預(yù)覽就可以查看當(dāng)前選中的模板.點(diǎn)擊使用模板按鈕就可以使用該模板并進(jìn)入作品編輯頁面.

5 結(jié)論與展望

本文基于Vue 框架、Echarts 可視化庫實(shí)現(xiàn)了數(shù)據(jù)可視化易用工具C317DataUI,旨在降低成本、提高效率快速實(shí)現(xiàn)數(shù)據(jù)可視化的應(yīng)用表達(dá).利用工具,能通過簡單拖拽操作實(shí)現(xiàn)可視化頁面布局,使用配置面板快速配置可視化組件;無需編寫代碼,采用傻瓜式的數(shù)據(jù)配置方式連接多源數(shù)據(jù)實(shí)現(xiàn)數(shù)據(jù)快速綁定.該工具適用于有大數(shù)據(jù)可視化需求的各個(gè)領(lǐng)域,如大宗商品行業(yè)交易數(shù)據(jù)可視化、設(shè)備運(yùn)維管理數(shù)據(jù)可視化、人員檔案管理數(shù)據(jù)可視化等,也可以應(yīng)用在大型企業(yè)的數(shù)據(jù)報(bào)表中,公共疫情分布展示中等,以及其他與我們的生活息息相關(guān)各種場景數(shù)據(jù)可視化表達(dá)中.