基于Echarts的疫情数据可视化技术研究

朱二莉 宋智鸿 戈梦宇

摘要：文中首先对疫情数据可视化的项目需求进行了背景分析，接着介绍了项目的总体设计思路，然后具体阐述了疫情数据库的设计、疫情数据的查询、疫情数据的展示，并分析了核心代码。文中利用MySQL数据库存放从官网爬取的疫情数据，使用PHP技术查询MySQL数据库中的疫情数据，实现网页和数据库的动态交互，利用Echarts图表技术进行疫情数据的可视化，制作了疫情折线图，用来展示疫情近期的变化趋势，制作了疫情柱形图，用来展示各个国家的疫情对比情况，让民众更加直观清晰地获取关键的疫情信息、了解疫情形势、判断疫情走势，为疫情防控提供直观、形象的数据支持。

关键词：疫情数据查询及可视化、Echarts图表、MySQL数据库、PHP技术

中图分类号：TP31      文献标识码：B

1背景

2020年，新冠病毒肆虐。疫情发生以来，全国上下步调一致、众志成城、共抗疫情。全民抗疫的同时，民众需要一个能够查看当前疫情数据的渠道，以此充分了解全国各地乃至全世界的疫情形势。本文综合运用PHP技术、MySQL数据库技术、Echarts图表技术，制作疫情趋势图和疫情对比图，用可视化的方式直观形象地呈现疫情数据，让民众更加直观清晰地获取关键的疫情信息。

2设计思路

折线图和柱形图，是最常见的疫情数据可视化的方式。折线图容易看出数据的走向，因此适合展示疫情近期的变化趋势，而通过柱形图则可以直观地看出各个国家的疫情对比情况。项目的设计思路如下：

（1）从丁香园网站爬取疫情数据，并利用MySQL数据库技术存放每天爬取的疫情数据;

（2）使用PHP技术实现网页后端和MySQL数据库的动态交互，从数据中查询疫情数据，并输出到网页前端;

（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"）;//设置时区为东八区北京时间

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）; //執行查询语句获得结果集，结果集中存放的是中国的疫情数据，包括了国家名，现存确诊人数、累计确诊总人数、治愈总人数、死亡总人数、时间。

while（$info= mysqli_fetch_array（$result））{ //从结果集中逐行读取中国近期疫情数据，写入到数组中。创建数组的时候，每一个疫情信息对应的键分别是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'）;//创建系统当前时间

$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容器

//创建一个div用来存放疫情趋势图。

（3）基于准备好的trendChina，初始化疫情趋势图

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

（4）设置疫情趋势图的配置项，最关键的是疫情数据的动态加载：采用$.ajax方法把时间动态加载到趋势图的X轴上，把现存确诊和累计确诊加载到series数据系列区域。这个趋势图的X轴是分类轴，Y轴是数值轴，因此xAxis的type属性值是category，yAxis的type属性值是value。找到xAxis属性，设置data属性，用ajax技术在X轴上动态加载疫情时间，核心代码如下^[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循環中依次从查询结果中读取疫情时间，并写入到数组array中。

}}}

return array;   //返回数组，完成X轴上时间的动态加载

}）（）

动态加载现存确诊、累计确诊，只需要在series配置项中找到对应的数据系列，设置type： "line"（折线图），然后设置data配置项即可。加载方法和动态加载时间大同小异，仍然采用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。找到yAxis属性，设置data属性，用ajax技术在y轴上动态加载国家名称。核心代码如下所示^[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循环中依次从查询结果中读取国家名称，并写入到数组arr中。

}}}

return array;   //返回数组，完成Y轴上国家名称的动态加载

}）（）

动态加载累计确诊，只需要在series配置项中找到对应的累计确诊数据系列，设置type： "bar"（柱形图），然后设置data配置项即可。加载方法和动态加载国家名大同小异，仍然采用ajax加载，加载累计确诊时需要从结果集中获取各个国家的累计确诊数字并写入数组中：arr.push（result[j]. accumulate） ^[6];

累计确诊疫情对比图网页运行效果如图2所示：

6总结

大数据技术在疫情宣传、疫情防控、复工复产等方面都发挥着重要的作用，而数据可视化技术，作为大数据的一种有效的表现形式，更是满足了民众对疫情信息的获取和查看需求。本文综合利用PHP、MySQL、Echarts图表技术，制作了疫情趋势图和疫情对比图，帮助民众了解疫情形势、判断疫情走势，为疫情防控提供直观、形象的数据支持。

參考文献：

[1]冀潇，李扬. 采用ECharts可视化技术实现的数据体系监控系统[J].计算机系统应用，2017，022（6）：72-76.

[2]赵海国.Ajax技术支持下的ECharts动态数据实时刷新技术的实现[J].电子技术，2018，000（000）3：25-27.

[3]洪敏，吴红亚，杨保华.基于HTML的Echarts的动态数据显示前端设计[J].计算机时代，2018， （000）8：27-29.

[4]周玮祎.基于ECharts的市场分析设计与实现[J].电子技术应用，2019， （45）12：101-105.

[5]黑马程序员. PHP+Ajax+jQuery网站开发项目式教程[M].北京：人民邮电出版社，2016.

[6]黑马程序员. PHP+MySQL网站开发项目式教程[M].北京：人民邮电出版社，2019.

作者简介：朱二莉（1980—），女，汉族，籍贯江苏省睢宁县，苏州经贸职业技术学院教师，职称讲师，硕士研究生学位，研究方向为软件开发、网络技术。