運用數據分析和可視化技術的數據大屏交互體驗系統研究

徐彤

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

關鍵詞：數據分析;可視化技術;大屏交互體驗系統

中圖分類號：TP391.41 文獻標識碼：A 文章編號：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

在過去很長一段時間內，用戶通過閱讀文本或數字認知數據。對用戶來說，這種方式較為枯燥乏味。而在統計學中，將數據以圖表的形式呈現出來，往往更直觀，更容易發現數據背后隱藏的規律，使人們的閱讀習慣由“閱讀”向“瀏覽”轉變，且人們往往更喜歡這種視覺沖擊效果。

1 系統總體結構

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

數據分析和可視化展示系統操作簡單，在小屏幕界面分為3個滑動頁面，用戶可分別對大屏數據排版、主題風格以及各個圖表的參數（如圖表類型、數據項等）進行設置，大屏幕界面顯示會隨之發生變化，實現小屏控大屏，動態修改展示方式，為用戶提供更加靈活的數據交互體驗[1]，總體功能結構圖如圖2所示。

整個項目的構成分為客戶端和Web端后臺服務器。其中，客戶端又分為“小屏”端和“大屏”端。客戶端主要采用了JQuery、Ajax、Echarts等前端框架。Web端后臺服務器采用Java編寫，主要采用了Spring Boot、Spring MVC框架，數據庫部分則采用了MySQL以及Redis[2]。

2 總功能點設計

2.1 數據源功能模塊

2.1.1 用戶可以上傳數據源文件。用戶在大屏上點擊上傳文件按鈕，選擇需要上傳的數據文件，完成上傳。

2.1.2 發送數據。系統維護人員利用OKHttp請求發送數據給后臺，便于讓前臺顯示實時數據。

2.2 數據可視化功能模塊

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

2.2.2 修改排版。用戶可以在“小屏幕”界面根據自己的需求對圖表展現的排版進行選擇，一經選擇，“大屏幕”會馬上切換。

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

2.2.4 修改圖表參數。用戶可以在“小屏幕”界面對“大屏幕”需要呈現的數據圖表進行選擇，選擇內容包括圖表類型、數據項以及數據條數，一經選擇，“大屏幕”會馬上根據設置的信息呈現圖表。

2.3 數據分析功能模塊

2.3.1 生成報告。用戶可以任意選擇在“大屏幕”或“小屏幕”進行數據分析，然后生成數據分析報告。

2.3.2 下載報告。如果用戶選擇生成數據分析報告，則可以選擇下載的生成數據分析報告。

3 技術難點

3.1 批數據處理

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

3.2 Redis緩存

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

4 使用方法

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

4.1 多屏互動

用戶應分別在大屏及小屏設備瀏覽器上打開大屏及小屏的頁面地址，在“小屏幕”點擊“請先選擇數據類型”下拉框，并在下拉框中選擇想在“大屏幕”中呈現的數據類型（可以選擇默認數據類型或自定義上傳數據類型）。

4.2 修改排版

在小屏端界面選擇數據類型之后，默認進入布局選擇頁面，用戶可點擊“選擇大屏布局”下拉提示，并在下拉框中選擇布局選項（1*1/2*2/3*3/4*3），大屏即會進行相應排版切換。

4.3 修改主題

在小屏端界面選擇數據類型之后，默認進入布局修改頁面。手指向右滑動或點擊下方切換欄中第2個按鈕，進入主題修改頁面。從下拉選項中選擇一個心儀的大屏主題樣式，大屏即會切換相應主題。

4.4 修改圖表參數

在小屏端界面，手指右滑或點擊下方切換欄中第3個按鈕，將進入圖表參數修改頁面。頁面中空白方塊即代表當前頁面顯示排版，點擊任意一個空白方塊，修改該方塊圖表的類型、數據項與數據量（圖表類型單選，數據項復選，數據量合法范圍為1～50;個別圖表如餅狀圖和儀表盤等，假如選了10條甚至更多條數據，也只會顯示一條的結果）。

4.5 下載數據分析報告

在大屏界面同時按住Ctrl+Q組合鍵，調出大屏功能菜單。鼠標點擊選擇相應格式數據分析報告（Word/Txt/Excel）進行下載。進入小屏界面，在默認界面即可通過點擊Word/Txt/Excel圖標進行分析報告下載（Excel下載文檔為源數據文檔）。

4.6 上傳數據

在大屏界面，通過Ctrl+Q的組合鍵調出功能菜單，鼠標點擊選擇數據上傳項，自動打開數據上傳頁面，在數據上傳頁面選擇需要上傳的數據文件并點擊提交，即可完成數據上傳。除此之外，用戶還可以通過OKHttp向項目接口實時傳輸數據，以進行實時數據可視化展示。

4.7 選擇圖表數據

在大屏界面，選擇具體一個圖表，點擊如圖3所示的數據節點，即可選擇或取消該節點的數據展示。

4.8 實時刷新開關數據

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

5 結語

隨著互聯網時代的高速發展，越來越多的技術涌現出來，例如，人工智能、大數據等。如何利用這些技術使其更加貼近生活，需要相關單位在數據可視化技術的基礎上開發以圖表形式呈現數據的功能，支持修改參數的顯示圖表類型，方便決策人分析數據的規律及聯系。本系統適合在各個行業運用，對各個行業今后的發展具有一定的指導作用。

參考文獻：

[1]韓玉敏，初紅霞，王希鳳，等.“可視化程序設計”的課程達成度分析和持續改進方法研究[J].黑龍江工程學院學報，2019（2）：61-64.

[2]黃雅莉，鐘琪.基于Ajax與Echarts的網頁動態數據加載[J].科技咨詢，2018（23）：40-41，43.