朱二莉 宋智鴻 戈夢宇

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

關鍵詞：疫情數據查詢及可視化、Echarts圖表、MySQL數據庫、PHP技術

中圖分類號：TP31????? 文獻標識碼：B

1背景

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

2設計思路

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

（1）從丁香園網站爬取疫情數據，并利用MySQL數據庫技術存放每天爬取的疫情數據;

（2）使用PHP技術實現網頁后端和MySQL數據庫的動態(tài)交互，從數據中查詢疫情數據，并輸出到網頁前端;

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

3數據查詢

3.1數據庫設計

在MySQL數據庫中新建一個疫情數據庫data，在data中新建疫情數據表格summary;把從官網爬取的全世界的疫情數據導入到data數據庫的summary表中。summary表中包含的字段有：countryName（國家名稱）、current（現存確診人數）、accumulate（累計確診總人數）、healing（治愈總人數）、die（死亡總人數）、time（時間）。

3.2連接數據庫

編寫PHP文件link.php文件，存放在網站目錄的conn子目錄下。該文件負責連接data數據庫，核心代碼如下^[2]：

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

mysqli_select_db（$dbconn，data'） or die（'疫情數據庫連接失??！'）; //選擇數據庫

mysqli_set_charset（$dbconn，"utf8"）;//設置字符集為中文utf8標準

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

3.3 查詢近期中國疫情數據

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

require "./conn/link.php";??? //導入數據庫連接文件link.php

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

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

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

$yq []= array（

'current'=>$info['current']，? //從結果集中讀取現存確診，寫入數組

' accumulate '=>$info[' accumulate ']， //從結果集中讀取累計確診，寫入數組

' healing '=>$info[' healing ']， //從結果集中讀取治愈總人數，寫入數組

'die'=>$info['die']， //從結果集中讀取死亡總人數，寫入數組

'time'=>$info['time'] //從結果集中讀取時間，寫入數組

）; }

$yqdata=json_encode（$yq）; //把疫情數組轉換為json格式的數據

echo $yqdata; //把json格式的疫情數據輸出到網頁前端

3.4查詢當天世界疫情數據

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

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

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

4制作疫情趨勢圖

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

（1）引入jQuery、Echarts

jquery.js、echarts.min.js這兩個文件都存放在了網站根目錄的jssrc子目錄下。

（2）為疫情趨勢圖準備一個具有高寬的Dom容器

（3）基于準備好的trendChina，初始化疫情趨勢圖

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

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

$.ajax（{

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

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

dataType ： "json"，//請求之后返回的數據格式是json

success ： function（result） {

if （result） {

for（var j=0;j

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

}}}

return array;?? //返回數組，完成X軸上時間的動態(tài)加載

}）（）

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

（5）使用剛指定的配置項和數據顯示圖表

trend.setOption（trendoption）;

疫情趨勢圖網頁運行效果如圖1所示：

5制作疫情對比圖

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

$.ajax（{

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

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

dataType ： "json"，//請求之后返回的數據格式是json

success ： function（result） {

if （result） {

for（var j=0;j

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

}}}

return array;?? //返回數組，完成Y軸上國家名稱的動態(tài)加載

}）（）

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

累計確診疫情對比圖網頁運行效果如圖2所示：

6總結

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

參考文獻：

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

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

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

[4]周瑋祎.基于ECharts的市場分析設計與實現[J].電子技術應用，2019， （45）12：101-105.

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

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

作者簡介：朱二莉（1980—），女，漢族，籍貫江蘇省睢寧縣，蘇州經貿職業(yè)技術學院教師，職稱講師，碩士研究生學位，研究方向為軟件開發(fā)、網絡技術。