王兆益 周愛平

摘要：面對大量的數(shù)據(jù)，傳統(tǒng)的處理方法是通過一些Excel表格、Word文件等進行分析，在大量數(shù)據(jù)方面顯得效率低，無法提取有效數(shù)據(jù)的重要信息，生成的圖表也難以理解。針對傳統(tǒng)處理方法的不足，數(shù)據(jù)可視化技術(shù)顯得尤其重要，設(shè)計了基于ECharts的數(shù)據(jù)可視化系統(tǒng)，以新冠肺炎疫情為例，使得大量枯燥無味的數(shù)據(jù)變得更加直觀、易于理解、可讀性強。

關(guān)鍵詞：數(shù)據(jù)可視化；ECharts；疫情監(jiān)控

中圖分類號：TP311文獻標(biāo)志碼：A文章編號：1008-1739（2020）19-60-3

0引言

隨著大數(shù)據(jù)的快速增長，數(shù)據(jù)越來越得到工業(yè)界和學(xué)術(shù)界的重視。面對大量的數(shù)據(jù)，傳統(tǒng)的數(shù)據(jù)處理方式存在許多不足，例如，數(shù)據(jù)處理的效率不高及處理結(jié)果難以理解等[1]。然而，數(shù)據(jù)可視化技術(shù)能夠挖掘數(shù)據(jù)有價值的信息，尤其屬性之間的關(guān)系，在數(shù)據(jù)分析方面具有重要作用[2-3]。伴隨數(shù)據(jù)運營技術(shù)的不斷發(fā)展，數(shù)據(jù)可視化工具也不斷增多，其中ECharts是一款廣泛使用的數(shù)據(jù)可視化工具之一。對于用戶而言，數(shù)據(jù)的采集、計算方式等是透明的，而直觀的結(jié)果是非常有意義的。為了更加直觀地理解數(shù)據(jù)的內(nèi)涵，通過數(shù)據(jù)可視化技術(shù)能夠滿足此需求[4-5]。針對傳統(tǒng)數(shù)據(jù)處理方式的低效率、難理解及可讀性差等問題，設(shè)計了基于ECharts的數(shù)據(jù)可視化系統(tǒng)。通過模擬數(shù)據(jù)對系統(tǒng)進行驗證，結(jié)果表明該系統(tǒng)能夠?qū)崿F(xiàn)數(shù)據(jù)可視化，使得人們更易于理解單調(diào)數(shù)據(jù)中蘊含的重要信息。

1 ECharts

ECharts是一款由百度研發(fā)團隊開發(fā)的開源數(shù)據(jù)可視化庫，可流暢地運行在PC和移動設(shè)備上，兼容當(dāng)前絕大部分瀏覽器，如IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等。ECharts底層依賴輕量級的矢量圖形庫ZRender，能夠提供直觀、交互豐富和可高度個性化定制的數(shù)據(jù)可視化圖表。

ECharts提供了常見的柱狀圖、折線圖、餅狀圖、玫瑰圖及雷達(dá)圖等，能夠直觀地將數(shù)據(jù)進行可視化。此外，ECharts可以將這些數(shù)據(jù)進行一定的交互，除了PC和移動端的交互，目前也適用于一些小程序[6]。

2系統(tǒng)設(shè)計

2.1需求分析

針對新型冠狀病毒肺炎疫情的嚴(yán)峻形勢，為了讓人們能夠較快且準(zhǔn)確地了解當(dāng)下的情形，如患者人數(shù)分布、患者的性別分布等，數(shù)據(jù)可視化顯得尤為重要。然而，單一的圖表顯示數(shù)據(jù)難以讓人們直觀地了解當(dāng)前疫情的總體情況。因此，設(shè)計基于ECharts的數(shù)據(jù)可視化系統(tǒng)成為迫切需求，系統(tǒng)的顯示結(jié)果便于用戶直觀理解數(shù)據(jù)的信息。隨著新冠肺炎疫情在全球蔓延，及時有效地了解疫情情況顯得尤為重要。

2.2技術(shù)框架設(shè)計

系統(tǒng)由前端和后端2個部分組成。通過Html、JavaScript等技術(shù)實現(xiàn)前端頁面，使用ECharts實現(xiàn)數(shù)據(jù)可視化；通過后臺MySQL數(shù)據(jù)庫對獲取的數(shù)據(jù)進行創(chuàng)建和存儲，使用JSP和Servlet對后臺進行維護。因此，系統(tǒng)是一套完整的前端（網(wǎng)頁）和后端（數(shù)據(jù)庫、服務(wù)器、Ajax）實現(xiàn)實時交互的數(shù)據(jù)監(jiān)控系統(tǒng)，如圖1所示。

通過ECharts實現(xiàn)疫情數(shù)據(jù)的可視化，包括柱狀圖模塊、折線圖模塊、餅狀圖模塊及地圖遷徙模塊等。為了讓人們能夠?qū)崟r地獲取當(dāng)下疫情的情況，在獲取數(shù)據(jù)方面添加了定時器，以一定時間間隔向后臺請求數(shù)據(jù)。ECharts圖標(biāo)是純JavaScript的圖標(biāo)庫，為了實現(xiàn)數(shù)據(jù)的實時顯示，系統(tǒng)在后端通過MySQL創(chuàng)建存儲模擬數(shù)據(jù)，并定時向數(shù)據(jù)庫獲取數(shù)據(jù)，在前端通過JSON將數(shù)據(jù)傳送到前端JSP頁面。

2.3頁面設(shè)計

系統(tǒng)頁面主要包括折線圖、餅狀圖、柱狀圖及遷徙地圖等。折線圖主要用于記錄每日新增確診人數(shù)、疑似人數(shù)、境外輸入人數(shù)；餅狀圖用于顯示確診人員的年齡分布和地區(qū)分布；柱狀圖主要用于記錄最近一周治愈的人數(shù)、各個類型人數(shù)比例；中國遷徙地圖主要用于顯示各個地區(qū)支援武漢的情況。系統(tǒng)上部顯示全國確診人數(shù)和治愈人數(shù)，系統(tǒng)右上角顯示系統(tǒng)的本地時間。由于本文使用模擬數(shù)據(jù)，系統(tǒng)顯示的時間與網(wǎng)絡(luò)時間并不同步。為了反映疫情的真實情況，未來將使用真實的數(shù)據(jù)且保持時間同步。

2.4數(shù)據(jù)庫設(shè)計

數(shù)據(jù)庫設(shè)計是指對于一個給定的應(yīng)用環(huán)境，構(gòu)造最優(yōu)的數(shù)據(jù)庫模式，建立數(shù)據(jù)庫及其應(yīng)用系統(tǒng)，使之能夠有效地存儲、查詢，滿足各類用戶的應(yīng)用需求。數(shù)據(jù)庫的設(shè)計結(jié)構(gòu)模型如下：

3系統(tǒng)實現(xiàn)

通過JSP、Html實現(xiàn)前端頁面。在Html文件中設(shè)置三大板塊，其中，兩側(cè)板塊展示數(shù)據(jù)可視化圖表，中間板塊展示遷徙地圖模型，在Html文件中創(chuàng)建合適的div用于存放相應(yīng)的板塊。JavaScript是一種輕量級的Web腳本語言，實現(xiàn)前后端信息交互。在Js文件中通過Ajax異步請求向數(shù)據(jù)庫獲取數(shù)據(jù)，然后利用ECharts可視化插件，在動態(tài)網(wǎng)頁中使得數(shù)據(jù)可視化，如圖2所示。

系統(tǒng)交互的具體流程：①在Html文件中創(chuàng)建ECharts圖表的div模塊；②將echart.min.js，flexible.js，jquery.js，china.js，myMap.js等文件通過