徐彤

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

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

中圖分類號(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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.2 Redis緩存

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

4 使用方法

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

4.1 多屏互動(dòng)

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

4.2 修改排版

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

4.3 修改主題

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

4.4 修改圖表參數(shù)

在小屏端界面，手指右滑或點(diǎn)擊下方切換欄中第3個(gè)按鈕，將進(jìn)入圖表參數(shù)修改頁面。頁面中空白方塊即代表當(dāng)前頁面顯示排版，點(diǎn)擊任意一個(gè)空白方塊，修改該方塊圖表的類型、數(shù)據(jù)項(xiàng)與數(shù)據(jù)量（圖表類型單選，數(shù)據(jù)項(xiàng)復(fù)選，數(shù)據(jù)量合法范圍為1～50;個(gè)別圖表如餅狀圖和儀表盤等，假如選了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)界面即可通過點(diǎn)擊Word/Txt/Excel圖標(biāo)進(jìn)行分析報(bào)告下載（Excel下載文檔為源數(shù)據(jù)文檔）。

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

在大屏界面，通過Ctrl+Q的組合鍵調(diào)出功能菜單，鼠標(biāo)點(diǎn)擊選擇數(shù)據(jù)上傳項(xiàng)，自動(dòng)打開數(shù)據(jù)上傳頁面，在數(shù)據(jù)上傳頁面選擇需要上傳的數(shù)據(jù)文件并點(diǎn)擊提交，即可完成數(shù)據(jù)上傳。除此之外，用戶還可以通過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í)刷新開關(guān)數(shù)據(jù)

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

5 結(jié)語

隨著互聯(lián)網(wǎng)時(shí)代的高速發(fā)展，越來越多的技術(shù)涌現(xiàn)出來，例如，人工智能、大數(shù)據(jù)等。如何利用這些技術(shù)使其更加貼近生活，需要相關(guān)單位在數(shù)據(jù)可視化技術(shù)的基礎(chǔ)上開發(fā)以圖表形式呈現(xiàn)數(shù)據(jù)的功能，支持修改參數(shù)的顯示圖表類型，方便決策人分析數(shù)據(jù)的規(guī)律及聯(lián)系。本系統(tǒng)適合在各個(gè)行業(yè)運(yùn)用，對各個(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)頁動(dòng)態(tài)數(shù)據(jù)加載[J].科技咨詢，2018（23）：40-41，43.