王兆益 周愛平

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

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

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

0引言

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

1 ECharts

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

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

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

2.1需求分析

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

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

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

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

2.3頁(yè)面設(shè)計(jì)

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

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

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

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

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

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