徐彤

摘 要：每個(gè)行業(yè)都要對(duì)數(shù)據(jù)趨勢(shì)進(jìn)行分析預(yù)測(cè)，因此，相關(guān)單位開(kāi)發(fā)了運(yùn)用數(shù)據(jù)分析和可視化技術(shù)的數(shù)據(jù)大屏交互體驗(yàn)系統(tǒng)，將文本、數(shù)字等傳統(tǒng)枯燥的數(shù)據(jù)以圖形化的形式呈現(xiàn)出來(lái)，大大提高了用戶(hù)體驗(yàn)滿(mǎn)意度，且支持生成數(shù)據(jù)分析報(bào)告、文件上傳等功能，方便用戶(hù)決策。

關(guān)鍵詞：數(shù)據(jù)分析;可視化技術(shù);大屏交互體驗(yàn)系統(tǒng)

中圖分類(lèi)號(hào)：TP391.41 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1003-5168（2019）07-0025-03

Abstract： Every industry needs to analyze and forecast the trend of data. Therefore， the relevant unit develops a data large-screen interactive experience system using data analysis and visualization technology， which presents the traditional boring data such as text and digital in graphical form， greatly improves the user's experience， and supports the number of generations. It also supports the functions of generating data analysis reports， uploading files and so on， so as to facilitate users to make decisions.

Keywords： data analysis; visualization technology;large screen interactive experience system

在過(guò)去很長(zhǎng)一段時(shí)間內(nèi)，用戶(hù)通過(guò)閱讀文本或數(shù)字認(rèn)知數(shù)據(jù)。對(duì)用戶(hù)來(lái)說(shuō)，這種方式較為枯燥乏味。而在統(tǒng)計(jì)學(xué)中，將數(shù)據(jù)以圖表的形式呈現(xiàn)出來(lái)，往往更直觀，更容易發(fā)現(xiàn)數(shù)據(jù)背后隱藏的規(guī)律，使人們的閱讀習(xí)慣由“閱讀”向“瀏覽”轉(zhuǎn)變，且人們往往更喜歡這種視覺(jué)沖擊效果。

1 系統(tǒng)總體結(jié)構(gòu)

本文設(shè)計(jì)并實(shí)現(xiàn)了數(shù)據(jù)分析和可視化展示系統(tǒng)，通過(guò)將所有數(shù)據(jù)匯聚到系統(tǒng)中，然后展示出來(lái)，用戶(hù)可以直觀看到整個(gè)數(shù)據(jù)態(tài)勢(shì)，看到數(shù)據(jù)的具體變化情況。運(yùn)用新技術(shù)、全媒體全平臺(tái)，為用戶(hù)提供一個(gè)全新的數(shù)據(jù)瀏覽體驗(yàn)，提供新穎的數(shù)據(jù)發(fā)布展示，貼合不同用戶(hù)的實(shí)際需求提供輔助決策信息。數(shù)據(jù)分析和可視化展示系統(tǒng)具有直觀化、關(guān)聯(lián)化、藝術(shù)化和交互性的特點(diǎn)，通過(guò)合理的可視化使用戶(hù)感知大量數(shù)據(jù)。用可視化方式呈現(xiàn)出來(lái)，會(huì)更易于被人們接受、理解。傳統(tǒng)的數(shù)據(jù)可視化系統(tǒng)往往針對(duì)特定業(yè)務(wù)場(chǎng)景，缺少擴(kuò)展性，用戶(hù)很難更改數(shù)據(jù)來(lái)源以及展示形式，但本文設(shè)計(jì)的數(shù)據(jù)分析和可視化展示系統(tǒng)能夠適應(yīng)開(kāi)放式結(jié)構(gòu)，用戶(hù)可以自己定制系統(tǒng)，隨時(shí)進(jìn)行動(dòng)態(tài)修改，給用戶(hù)提供完美的數(shù)據(jù)大屏交互體驗(yàn)，界面效果如圖1所示。

數(shù)據(jù)分析和可視化展示系統(tǒng)操作簡(jiǎn)單，在小屏幕界面分為3個(gè)滑動(dòng)頁(yè)面，用戶(hù)可分別對(duì)大屏數(shù)據(jù)排版、主題風(fēng)格以及各個(gè)圖表的參數(shù)（如圖表類(lèi)型、數(shù)據(jù)項(xiàng)等）進(jìn)行設(shè)置，大屏幕界面顯示會(huì)隨之發(fā)生變化，實(shí)現(xiàn)小屏控大屏，動(dòng)態(tài)修改展示方式，為用戶(hù)提供更加靈活的數(shù)據(jù)交互體驗(yàn)[1]，總體功能結(jié)構(gòu)圖如圖2所示。

整個(gè)項(xiàng)目的構(gòu)成分為客戶(hù)端和Web端后臺(tái)服務(wù)器。其中，客戶(hù)端又分為“小屏”端和“大屏”端?？蛻?hù)端主要采用了JQuery、Ajax、Echarts等前端框架。Web端后臺(tái)服務(wù)器采用Java編寫(xiě)，主要采用了Spring Boot、Spring MVC框架，數(shù)據(jù)庫(kù)部分則采用了MySQL以及Redis[2]。

2 總功能點(diǎn)設(shè)計(jì)

2.1 數(shù)據(jù)源功能模塊

2.1.1 用戶(hù)可以上傳數(shù)據(jù)源文件。用戶(hù)在大屏上點(diǎn)擊上傳文件按鈕，選擇需要上傳的數(shù)據(jù)文件，完成上傳。

2.1.2 發(fā)送數(shù)據(jù)。系統(tǒng)維護(hù)人員利用OKHttp請(qǐng)求發(fā)送數(shù)據(jù)給后臺(tái)，便于讓前臺(tái)顯示實(shí)時(shí)數(shù)據(jù)。

2.2 數(shù)據(jù)可視化功能模塊

2.2.1 多屏互動(dòng)。用戶(hù)可以通過(guò)“小屏幕”對(duì)“大屏幕”進(jìn)行控制，通過(guò)在“小屏幕”界面進(jìn)行操作，如改變主題、圖表參數(shù)等，使“大屏幕”隨之進(jìn)行變化。

2.2.2 修改排版。用戶(hù)可以在“小屏幕”界面根據(jù)自己的需求對(duì)圖表展現(xiàn)的排版進(jìn)行選擇，一經(jīng)選擇，“大屏幕”會(huì)馬上切換。

2.2.3 修改主題。用戶(hù)可以在“小屏幕”界面根據(jù)自己的需求、喜好等對(duì)“大屏幕”界面的主題進(jìn)行選擇，一經(jīng)選擇，“大屏幕”會(huì)馬上切換。

2.2.4 修改圖表參數(shù)。用戶(hù)可以在“小屏幕”界面對(duì)“大屏幕”需要呈現(xiàn)的數(shù)據(jù)圖表進(jìn)行選擇，選擇內(nèi)容包括圖表類(lèi)型、數(shù)據(jù)項(xiàng)以及數(shù)據(jù)條數(shù)，一經(jīng)選擇，“大屏幕”會(huì)馬上根據(jù)設(shè)置的信息呈現(xiàn)圖表。

2.3 數(shù)據(jù)分析功能模塊

2.3.1 生成報(bào)告。用戶(hù)可以任意選擇在“大屏幕”或“小屏幕”進(jìn)行數(shù)據(jù)分析，然后生成數(shù)據(jù)分析報(bào)告。

2.3.2 下載報(bào)告。如果用戶(hù)選擇生成數(shù)據(jù)分析報(bào)告，則可以選擇下載的生成數(shù)據(jù)分析報(bào)告。

3 技術(shù)難點(diǎn)

3.1 批數(shù)據(jù)處理

在本項(xiàng)目中，考慮到用戶(hù)可能希望自己上傳數(shù)據(jù)，于是通過(guò)Spring Boot實(shí)現(xiàn)了文件上傳功能，文件上傳之后，使用Spring Batch框架進(jìn)行批數(shù)據(jù)處理。雖然網(wǎng)上這方面的資源非常少，但官網(wǎng)給了使用示例，相關(guān)單位在理解示例之后，能夠?qū)崿F(xiàn)批數(shù)據(jù)處理，使用戶(hù)按照指定數(shù)據(jù)格式上傳數(shù)據(jù)之后，將其中的數(shù)據(jù)導(dǎo)入數(shù)據(jù)庫(kù)。在本地新建一個(gè)dataInfo.csv文件，文件每行根據(jù)dataInfo數(shù)據(jù)表字段添加數(shù)據(jù)，每個(gè)字段所對(duì)應(yīng)的數(shù)據(jù)之間用逗號(hào)分隔。通過(guò)配置Spring Batch的Reader、Processor和Writer讀取csv文件，進(jìn)行數(shù)據(jù)處理和加工，最后寫(xiě)進(jìn)數(shù)據(jù)庫(kù)中。

3.2 Redis緩存

在該項(xiàng)目中，由于設(shè)置了定時(shí)任務(wù)，大概每1min會(huì)自動(dòng)在界面中刷新一次數(shù)據(jù)，重新繪制ECharts圖表。但每次重新繪制圖表，實(shí)際上向數(shù)據(jù)庫(kù)中請(qǐng)求了9次相同的數(shù)據(jù)，如果每次都從MySQL中請(qǐng)求，用戶(hù)體驗(yàn)會(huì)非常差，但是假如把第一次請(qǐng)求得到的數(shù)據(jù)放進(jìn)緩存，之后8次都從緩存中得到數(shù)據(jù)，效率會(huì)非常高。

4 使用方法

為獲得更好的操作體驗(yàn)，相關(guān)單位應(yīng)使用Google Chrome或者Apple Safari瀏覽頁(yè)面。大屏幕展示頁(yè)面地址：47.101.190.24：9898/largeScreenEnd;小屏幕操控頁(yè)面地址：47.101.190.24：9898/mobileEnd。

4.1 多屏互動(dòng)

用戶(hù)應(yīng)分別在大屏及小屏設(shè)備瀏覽器上打開(kāi)大屏及小屏的頁(yè)面地址，在“小屏幕”點(diǎn)擊“請(qǐng)先選擇數(shù)據(jù)類(lèi)型”下拉框，并在下拉框中選擇想在“大屏幕”中呈現(xiàn)的數(shù)據(jù)類(lèi)型（可以選擇默認(rèn)數(shù)據(jù)類(lèi)型或自定義上傳數(shù)據(jù)類(lèi)型）。

4.2 修改排版

在小屏端界面選擇數(shù)據(jù)類(lèi)型之后，默認(rèn)進(jìn)入布局選擇頁(yè)面，用戶(hù)可點(diǎn)擊“選擇大屏布局”下拉提示，并在下拉框中選擇布局選項(xiàng)（1*1/2*2/3*3/4*3），大屏即會(huì)進(jìn)行相應(yīng)排版切換。

4.3 修改主題

在小屏端界面選擇數(shù)據(jù)類(lèi)型之后，默認(rèn)進(jìn)入布局修改頁(yè)面。手指向右滑動(dòng)或點(diǎn)擊下方切換欄中第2個(gè)按鈕，進(jìn)入主題修改頁(yè)面。從下拉選項(xiàng)中選擇一個(gè)心儀的大屏主題樣式，大屏即會(huì)切換相應(yīng)主題。

4.4 修改圖表參數(shù)

在小屏端界面，手指右滑或點(diǎn)擊下方切換欄中第3個(gè)按鈕，將進(jìn)入圖表參數(shù)修改頁(yè)面。頁(yè)面中空白方塊即代表當(dāng)前頁(yè)面顯示排版，點(diǎn)擊任意一個(gè)空白方塊，修改該方塊圖表的類(lèi)型、數(shù)據(jù)項(xiàng)與數(shù)據(jù)量（圖表類(lèi)型單選，數(shù)據(jù)項(xiàng)復(fù)選，數(shù)據(jù)量合法范圍為1～50;個(gè)別圖表如餅狀圖和儀表盤(pán)等，假如選了10條甚至更多條數(shù)據(jù)，也只會(huì)顯示一條的結(jié)果）。

4.5 下載數(shù)據(jù)分析報(bào)告

在大屏界面同時(shí)按住Ctrl+Q組合鍵，調(diào)出大屏功能菜單。鼠標(biāo)點(diǎn)擊選擇相應(yīng)格式數(shù)據(jù)分析報(bào)告（Word/Txt/Excel）進(jìn)行下載。進(jìn)入小屏界面，在默認(rèn)界面即可通過(guò)點(diǎn)擊Word/Txt/Excel圖標(biāo)進(jìn)行分析報(bào)告下載（Excel下載文檔為源數(shù)據(jù)文檔）。

4.6 上傳數(shù)據(jù)

在大屏界面，通過(guò)Ctrl+Q的組合鍵調(diào)出功能菜單，鼠標(biāo)點(diǎn)擊選擇數(shù)據(jù)上傳項(xiàng)，自動(dòng)打開(kāi)數(shù)據(jù)上傳頁(yè)面，在數(shù)據(jù)上傳頁(yè)面選擇需要上傳的數(shù)據(jù)文件并點(diǎn)擊提交，即可完成數(shù)據(jù)上傳。除此之外，用戶(hù)還可以通過(guò)OKHttp向項(xiàng)目接口實(shí)時(shí)傳輸數(shù)據(jù)，以進(jìn)行實(shí)時(shí)數(shù)據(jù)可視化展示。

4.7 選擇圖表數(shù)據(jù)

在大屏界面，選擇具體一個(gè)圖表，點(diǎn)擊如圖3所示的數(shù)據(jù)節(jié)點(diǎn)，即可選擇或取消該節(jié)點(diǎn)的數(shù)據(jù)展示。

4.8 實(shí)時(shí)刷新開(kāi)關(guān)數(shù)據(jù)

在大屏界面，點(diǎn)擊右上角的播放與暫停按鈕，即可打開(kāi)或停止數(shù)據(jù)實(shí)時(shí)刷新功能（伴隨著Real-Time Update On/Off提示）。

5 結(jié)語(yǔ)

隨著互聯(lián)網(wǎng)時(shí)代的高速發(fā)展，越來(lái)越多的技術(shù)涌現(xiàn)出來(lái)，例如，人工智能、大數(shù)據(jù)等。如何利用這些技術(shù)使其更加貼近生活，需要相關(guān)單位在數(shù)據(jù)可視化技術(shù)的基礎(chǔ)上開(kāi)發(fā)以圖表形式呈現(xiàn)數(shù)據(jù)的功能，支持修改參數(shù)的顯示圖表類(lèi)型，方便決策人分析數(shù)據(jù)的規(guī)律及聯(lián)系。本系統(tǒng)適合在各個(gè)行業(yè)運(yùn)用，對(duì)各個(gè)行業(yè)今后的發(fā)展具有一定的指導(dǎo)作用。

參考文獻(xiàn)：

[1]韓玉敏，初紅霞，王希鳳，等.“可視化程序設(shè)計(jì)”的課程達(dá)成度分析和持續(xù)改進(jìn)方法研究[J].黑龍江工程學(xué)院學(xué)報(bào)，2019（2）：61-64.

[2]黃雅莉，鐘琪.基于Ajax與Echarts的網(wǎng)頁(yè)動(dòng)態(tài)數(shù)據(jù)加載[J].科技咨詢(xún)，2018（23）：40-41，43.