基于Echarts的疫情數(shù)據(jù)可視化技術(shù)研究

朱二莉 宋智鴻 戈夢宇

摘要：文中首先對疫情數(shù)據(jù)可視化的項(xiàng)目需求進(jìn)行了背景分析，接著介紹了項(xiàng)目的總體設(shè)計(jì)思路，然后具體闡述了疫情數(shù)據(jù)庫的設(shè)計(jì)、疫情數(shù)據(jù)的查詢、疫情數(shù)據(jù)的展示，并分析了核心代碼。文中利用MySQL數(shù)據(jù)庫存放從官網(wǎng)爬取的疫情數(shù)據(jù)，使用PHP技術(shù)查詢MySQL數(shù)據(jù)庫中的疫情數(shù)據(jù)，實(shí)現(xiàn)網(wǎng)頁和數(shù)據(jù)庫的動(dòng)態(tài)交互，利用Echarts圖表技術(shù)進(jìn)行疫情數(shù)據(jù)的可視化，制作了疫情折線圖，用來展示疫情近期的變化趨勢，制作了疫情柱形圖，用來展示各個(gè)國家的疫情對比情況，讓民眾更加直觀清晰地獲取關(guān)鍵的疫情信息、了解疫情形勢、判斷疫情走勢，為疫情防控提供直觀、形象的數(shù)據(jù)支持。

關(guān)鍵詞：疫情數(shù)據(jù)查詢及可視化、Echarts圖表、MySQL數(shù)據(jù)庫、PHP技術(shù)

中圖分類號：TP31????? 文獻(xiàn)標(biāo)識碼：B

1背景

2020年，新冠病毒肆虐。疫情發(fā)生以來，全國上下步調(diào)一致、眾志成城、共抗疫情。全民抗疫的同時(shí)，民眾需要一個(gè)能夠查看當(dāng)前疫情數(shù)據(jù)的渠道，以此充分了解全國各地乃至全世界的疫情形勢。本文綜合運(yùn)用PHP技術(shù)、MySQL數(shù)據(jù)庫技術(shù)、Echarts圖表技術(shù)，制作疫情趨勢圖和疫情對比圖，用可視化的方式直觀形象地呈現(xiàn)疫情數(shù)據(jù)，讓民眾更加直觀清晰地獲取關(guān)鍵的疫情信息。

2設(shè)計(jì)思路

折線圖和柱形圖，是最常見的疫情數(shù)據(jù)可視化的方式。折線圖容易看出數(shù)據(jù)的走向，因此適合展示疫情近期的變化趨勢，而通過柱形圖則可以直觀地看出各個(gè)國家的疫情對比情況。項(xiàng)目的設(shè)計(jì)思路如下：

（1）從丁香園網(wǎng)站爬取疫情數(shù)據(jù)，并利用MySQL數(shù)據(jù)庫技術(shù)存放每天爬取的疫情數(shù)據(jù);

（2）使用PHP技術(shù)實(shí)現(xiàn)網(wǎng)頁后端和MySQL數(shù)據(jù)庫的動(dòng)態(tài)交互，從數(shù)據(jù)中查詢疫情數(shù)據(jù)，并輸出到網(wǎng)頁前端;

（3）在網(wǎng)頁前端使用Echarts折線圖展示疫情變化趨勢，使用柱形圖展示各個(gè)國家疫情對比情況^[1]。

3數(shù)據(jù)查詢

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

在MySQL數(shù)據(jù)庫中新建一個(gè)疫情數(shù)據(jù)庫data，在data中新建疫情數(shù)據(jù)表格summary;把從官網(wǎng)爬取的全世界的疫情數(shù)據(jù)導(dǎo)入到data數(shù)據(jù)庫的summary表中。summary表中包含的字段有：countryName（國家名稱）、current（現(xiàn)存確診人數(shù)）、accumulate（累計(jì)確診總?cè)藬?shù)）、healing（治愈總?cè)藬?shù)）、die（死亡總?cè)藬?shù)）、time（時(shí)間）。

3.2連接數(shù)據(jù)庫

編寫PHP文件link.php文件，存放在網(wǎng)站目錄的conn子目錄下。該文件負(fù)責(zé)連接data數(shù)據(jù)庫，核心代碼如下^[2]：

$dbconn=mysqli_connect（"localhost"，"Tom"，"123456"） or die（'服務(wù)器連接失??！'）; //連接MySQL服務(wù)器，登錄名為Tom，密碼為123456。

mysqli_select_db（$dbconn，data'） or die（'疫情數(shù)據(jù)庫連接失?。?）; //選擇數(shù)據(jù)庫

mysqli_set_charset（$dbconn，"utf8"）;//設(shè)置字符集為中文utf8標(biāo)準(zhǔn)

date_default_timezone_set（"PRC"）;//設(shè)置時(shí)區(qū)為東八區(qū)北京時(shí)間

3.3 查詢近期中國疫情數(shù)據(jù)

編寫PHP文件trend.php，查詢中國近期疫情數(shù)據(jù)，核心代碼如下所示：

require "./conn/link.php";??? //導(dǎo)入數(shù)據(jù)庫連接文件link.php

$query="select * from summary where countryName='中國' order by time"; //定義一個(gè)SQL語句，該語句可以從summary表中查詢中國近期疫情數(shù)據(jù)，并按照時(shí)間進(jìn)行升序排列。

$result = mysqli_query（$dbconn，$query）; //執(zhí)行查詢語句獲得結(jié)果集，結(jié)果集中存放的是中國的疫情數(shù)據(jù)，包括了國家名，現(xiàn)存確診人數(shù)、累計(jì)確診總?cè)藬?shù)、治愈總?cè)藬?shù)、死亡總?cè)藬?shù)、時(shí)間。

while（$info= mysqli_fetch_array（$result））{ //從結(jié)果集中逐行讀取中國近期疫情數(shù)據(jù)，寫入到數(shù)組中。創(chuàng)建數(shù)組的時(shí)候，每一個(gè)疫情信息對應(yīng)的鍵分別是countryName 、current、accumulate、healing、die、time。

$yq []= array（

'current'=>$info['current']，? //從結(jié)果集中讀取現(xiàn)存確診，寫入數(shù)組

' accumulate '=>$info[' accumulate ']， //從結(jié)果集中讀取累計(jì)確診，寫入數(shù)組

' healing '=>$info[' healing ']， //從結(jié)果集中讀取治愈總?cè)藬?shù)，寫入數(shù)組

'die'=>$info['die']， //從結(jié)果集中讀取死亡總?cè)藬?shù)，寫入數(shù)組

'time'=>$info['time'] //從結(jié)果集中讀取時(shí)間，寫入數(shù)組

）; }

$yqdata=json_encode（$yq）; //把疫情數(shù)組轉(zhuǎn)換為json格式的數(shù)據(jù)

echo $yqdata; //把json格式的疫情數(shù)據(jù)輸出到網(wǎng)頁前端

3.4查詢當(dāng)天世界疫情數(shù)據(jù)

編寫world.php文件，查詢當(dāng)天世界疫情數(shù)據(jù)，核心代碼和查詢近期中國疫情數(shù)據(jù)基本相同，僅是查詢語句有所不同，查詢當(dāng)天世界疫情數(shù)據(jù)的SQL語句如下：

$t=date（'Y-m-d'）;//創(chuàng)建系統(tǒng)當(dāng)前時(shí)間

$sql="select * from summary where time=$t order by accumulate ";//從summary表中查詢當(dāng)天世界疫情數(shù)據(jù)，并按照累計(jì)確診進(jìn)行升序排序。

4制作疫情趨勢圖

百度Echarts是一個(gè)基于Canvas的純Javascript圖表庫，提供了生動(dòng)、直觀、交互性的、可高度個(gè)性化定制的Web可視化圖表，如地圖、折線圖、柱形圖等。在本文中，采用折線圖來直觀呈現(xiàn)近期疫情的變化趨勢。疫情趨勢圖（以中國現(xiàn)存確診和累計(jì)確診為例）的制作步驟及對應(yīng)的核心代碼如下所示^[3]：

（1）引入jQuery、Echarts

jquery.js、echarts.min.js這兩個(gè)文件都存放在了網(wǎng)站根目錄的jssrc子目錄下。

（2）為疫情趨勢圖準(zhǔn)備一個(gè)具有高寬的Dom容器

（3）基于準(zhǔn)備好的trendChina，初始化疫情趨勢圖

var? trend = echarts.init（document.getElementById（'trendChina'））;

（4）設(shè)置疫情趨勢圖的配置項(xiàng)，最關(guān)鍵的是疫情數(shù)據(jù)的動(dòng)態(tài)加載：采用$.ajax方法把時(shí)間動(dòng)態(tài)加載到趨勢圖的X軸上，把現(xiàn)存確診和累計(jì)確診加載到series數(shù)據(jù)系列區(qū)域。這個(gè)趨勢圖的X軸是分類軸，Y軸是數(shù)值軸，因此xAxis的type屬性值是category，yAxis的type屬性值是value。找到xAxis屬性，設(shè)置data屬性，用ajax技術(shù)在X軸上動(dòng)態(tài)加載疫情時(shí)間，核心代碼如下^[4]：

$.ajax（{

type ： "post"，??? //請求方式是post

url ： "trend.php"，//請求地址是trend.php，該文件可以從數(shù)據(jù)庫中查詢近期中國疫情數(shù)據(jù)，查詢得到的數(shù)據(jù)格式是json格式。

dataType ： "json"，//請求之后返回的數(shù)據(jù)格式是json

success ： function（result） {

if （result） {

for（var j=0;j

array.push（result[j].time）; //如果請求成功，就在for循環(huán)中依次從查詢結(jié)果中讀取疫情時(shí)間，并寫入到數(shù)組array中。

}}}

return array;?? //返回?cái)?shù)組，完成X軸上時(shí)間的動(dòng)態(tài)加載

}）（）

動(dòng)態(tài)加載現(xiàn)存確診、累計(jì)確診，只需要在series配置項(xiàng)中找到對應(yīng)的數(shù)據(jù)系列，設(shè)置type： "line"（折線圖），然后設(shè)置data配置項(xiàng)即可。加載方法和動(dòng)態(tài)加載時(shí)間大同小異，仍然采用ajax加載，加載現(xiàn)存確診時(shí)需要從結(jié)果集中獲取現(xiàn)存確診并寫入數(shù)組中：array.push（result[j]. current）;而加載累積確診時(shí)需要從結(jié)果集中獲取累積確診并寫入數(shù)組中：array.push（result[j]. accumulate）;

（5）使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表

trend.setOption（trendoption）;

疫情趨勢圖網(wǎng)頁運(yùn)行效果如圖1所示：

5制作疫情對比圖

各個(gè)國家的疫情對比情況采用Echarts柱形圖來展示（以各個(gè)國家累計(jì)確診對比圖為例）。這個(gè)柱形圖的Y軸是分類軸，X軸是數(shù)值軸，因此yAxis的type屬性值是category，xAxis的type屬性值是value。找到y(tǒng)Axis屬性，設(shè)置data屬性，用ajax技術(shù)在y軸上動(dòng)態(tài)加載國家名稱。核心代碼如下所示^[5]：

$.ajax（{

type ： "post"，??? //請求方式是post

url ： "world.php"，//請求地址是world.php，該文件可以從數(shù)據(jù)庫中查詢當(dāng)天世界疫情數(shù)據(jù)，查詢得到的數(shù)據(jù)格式是json格式。

dataType ： "json"，//請求之后返回的數(shù)據(jù)格式是json

success ： function（result） {

if （result） {

for（var j=0;j

arr.push（result[j].countryName）;//如果請求成功，就在for循環(huán)中依次從查詢結(jié)果中讀取國家名稱，并寫入到數(shù)組arr中。

}}}

return array;?? //返回?cái)?shù)組，完成Y軸上國家名稱的動(dòng)態(tài)加載

}）（）

動(dòng)態(tài)加載累計(jì)確診，只需要在series配置項(xiàng)中找到對應(yīng)的累計(jì)確診數(shù)據(jù)系列，設(shè)置type： "bar"（柱形圖），然后設(shè)置data配置項(xiàng)即可。加載方法和動(dòng)態(tài)加載國家名大同小異，仍然采用ajax加載，加載累計(jì)確診時(shí)需要從結(jié)果集中獲取各個(gè)國家的累計(jì)確診數(shù)字并寫入數(shù)組中：arr.push（result[j]. accumulate） ^[6];

累計(jì)確診疫情對比圖網(wǎng)頁運(yùn)行效果如圖2所示：

6總結(jié)

大數(shù)據(jù)技術(shù)在疫情宣傳、疫情防控、復(fù)工復(fù)產(chǎn)等方面都發(fā)揮著重要的作用，而數(shù)據(jù)可視化技術(shù)，作為大數(shù)據(jù)的一種有效的表現(xiàn)形式，更是滿足了民眾對疫情信息的獲取和查看需求。本文綜合利用PHP、MySQL、Echarts圖表技術(shù)，制作了疫情趨勢圖和疫情對比圖，幫助民眾了解疫情形勢、判斷疫情走勢，為疫情防控提供直觀、形象的數(shù)據(jù)支持。

參考文獻(xiàn)：

[1]冀瀟，李揚(yáng). 采用ECharts可視化技術(shù)實(shí)現(xiàn)的數(shù)據(jù)體系監(jiān)控系統(tǒng)[J].計(jì)算機(jī)系統(tǒng)應(yīng)用，2017，022（6）：72-76.

[2]趙海國.Ajax技術(shù)支持下的ECharts動(dòng)態(tài)數(shù)據(jù)實(shí)時(shí)刷新技術(shù)的實(shí)現(xiàn)[J].電子技術(shù)，2018，000（000）3：25-27.

[3]洪敏，吳紅亞，楊保華.基于HTML的Echarts的動(dòng)態(tài)數(shù)據(jù)顯示前端設(shè)計(jì)[J].計(jì)算機(jī)時(shí)代，2018， （000）8：27-29.

[4]周瑋祎.基于ECharts的市場分析設(shè)計(jì)與實(shí)現(xiàn)[J].電子技術(shù)應(yīng)用，2019， （45）12：101-105.

[5]黑馬程序員. PHP+Ajax+jQuery網(wǎng)站開發(fā)項(xiàng)目式教程[M].北京：人民郵電出版社，2016.

[6]黑馬程序員. PHP+MySQL網(wǎng)站開發(fā)項(xiàng)目式教程[M].北京：人民郵電出版社，2019.

作者簡介：朱二莉（1980—），女，漢族，籍貫江蘇省睢寧縣，蘇州經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院教師，職稱講師，碩士研究生學(xué)位，研究方向?yàn)檐浖_發(fā)、網(wǎng)絡(luò)技術(shù)。