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

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

作者：朱二莉 宋智鸿 戈梦宇

来源：《甘肃科技纵横》2020年第10期

摘要：文中首先对疫情数据可视化的项目需求进行了背景分析，接着介绍了项目的总体设

计思路，然后具体阐述了疫情数据库的设计、疫情数据的查询、疫情数据的展示，并分析了核

心代码。文中利用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文件文件，存放在网站目录的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文件，查询中国近期疫情数据，核心代码如下所示：

require "./conn/";;;; //导入数据库连接文件

$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查询当天世界疫情数据

编写文件，查询当天世界疫情数据，核心代码和查询近期中国疫情数据基本相

同，仅是查询语句有所不同，查询当天世界疫情数据的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

、这两个文件都存放在了网站根目录的jssrc子目录下。

（2）为疫情趋势图准备一个具有高宽的Dom容器

情趋势图。

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

var; trend = （mentById（'trendChina'））;

（4）设置疫情趋势图的配置项，最关键的是疫情数据的动态加载：采用$.ajax方法把时间

动态加载到趋势图的X轴上，把现存确诊和累计确诊加载到series数据系列区域。这个趋势图

的X轴是分类轴，Y轴是数值轴，因此xAxis的type属性值是category，yAxis的type属性值

是value。找到xAxis属性，设置data属性，用ajax技术在X轴上动态加载疫情时间，核心代

码如下

[4]

：

$.ajax（{

type ： "post"，;;; //请求方式是post

url ： ""，//请求地址是，该文件可以从数据库中查询近期中国疫情数

据，查询得到的数据格式是json格式。

dataType ： "json"，//请求之后返回的数据格式是json

success ： function（result） {

if （result） {

for（var j=0;j<;j++）{

（result[j].time）; //如果请求成功，就在for循環中依次从查询结果中读取疫情时

间，并写入到数组array中。

}}}

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

}）（）

动态加载现存确诊、累计确诊，只需要在series配置项中找到对应的数据系列，设置

type： "line"（折线图），然后设置data配置项即可。加载方法和动态加载时间大同小异，仍

然采用ajax加载，加载现存确诊时需要从结果集中获取现存确诊并写入数组中：

（result[j]. current）;而加载累积确诊时需要从结果集中获取累积确诊并写入数组中：

（result[j]. accumulate）;

（5）使用刚指定的配置项和数据显示图表

疫情趋势图网页运行效果如图1所示：

5制作疫情对比图

各个国家的疫情对比情况采用Echarts柱形图来展示（以各个国家累计确诊对比图为

例）。这个柱形图的Y轴是分类轴，X轴是数值轴，因此yAxis的type属性值是category，

xAxis的type属性值是value。找到yAxis属性，设置data属性，用ajax技术在y轴上动态加

载国家名称。核心代码如下所示

[5]

：

$.ajax（{

type ： "post"，;;; //请求方式是post

url ： ""，//请求地址是，该文件可以从数据库中查询当天世界疫情数

据，查询得到的数据格式是json格式。

dataType ： "json"，//请求之后返回的数据格式是json

success ： function（result） {

if （result） {

for（var j=0;j<;j++）{

（result[j].countryName）;//如果请求成功，就在for循环中依次从查询结果中读取

国家名称，并写入到数组arr中。

}}}

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

}）（）

累计确诊疫情对比图网页运行效果如图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—），女，汉族，籍贯江苏省睢宁县，苏州经贸职业技术学院教

师，职称讲师，硕士研究生学位，研究方向为软件开发、网络技术。