疫情期间，各类应用系统、大数据系统为防疫抗疫带来了巨大助力。国家博物馆首次将代码列为藏品，那就是抗击疫情期间来自阿里程序员写的健康码第一行代码以及研发人员的签名。这展现了广大程序员在疫情面前，争当勇敢的“逆行者”，为战“疫”贡献力量的职业担当。责任担当精神是新时代中国精神的重要组成部分。在对抗疫情中，全国人民用实际行动携手抗疫，展现出了中华民族的责任担当精神。我们要学习对抗疫情中展现的新时代责任担当精神，从而提高道德素养，培养责任担当意识；强化知识学习，培养责任担当本领；注重社会实践，培养责任担当能力；并将疫情中的责任担当精神内化于心，外化于行。
1 案例呈现
本章将综合运用ECMAScript、BOM、DOM和Ajax等知识，实现如图11-5所示的基于ECharts的疫情实时监控系统。
2 案例分析
疫情实时监控系统分为如下模块：实时时间、全球新冠疫苗实时接种数据、全国疫情实时追踪、中国累计接种趋势、中国每百人接种趋势、疫情地图、全国现有确诊人数TOP10和风险地区。第10章已经介绍过疫情数据如何通过Ajax技术从腾讯服务器获取，本章的主要工作是处理疫情数据，通过ECharts的折线图、饼图、数据地图等将数据可视化。
开始编写JavaScript代码前，首先创建1个文件夹存放用到的外部js文件、1个文件夹存放CSS文件、1个文件夹存放素材；然后新建index.html文件和index.js文件。在网页文件index.html中引入所有的js文件，包括echarts.min.js、china.js、jquery.min.js和index.js。
示例代码如下：
<body>
//此处省略其他html代码
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
3 页面布局
由图11-6可知，我们可以将数据展示页面分为9个区域，如图11-6所示。页面区域的划分并不是唯一的，读者可以自行划分。HTML、CSS代码参见配套源码。
图11-6 页面布局图
4 实时时间模块
利用内置对象Date提供的toLocaleString()方法将时间转化为本机格式显示。使用定时器方法，每隔一秒钟执行一次函数以获取最新时间。示例代码如下：
function showTime(){
//获取页面中时间显示区域，并将内容赋值为当前时间的本地格式
document.querySelector('#kyjs-wrap .time').innerText = (new Date()).toLocaleString();
}
showTime();//先执行一次函数，显示当前时间
setInterval(showTime,1000); //每隔一秒执行一次函数
上述代码实现效果，如图11-7所示。
图11-7 实时时间
5 全球新冠疫苗实时接种数据模块
将数据渲染在页面指定位置，示例代码如下：
1 //渲染全球累计接种数据
2 document.getElementById('world-all').innerHTML = f(data.VaccineTopData.全球.total_vaccinations);
3 //渲染全球较上日新增数据
4 document.getElementById('world-add').innerHTML = f(data.VaccineTopData.全球.new_vaccinations);
5 //渲染全球每百人接种数据
6 document.getElementById('world-per').innerHTML = f(data.VaccineTopData.全球.total_vaccinations_per_hundred);
7 //渲染中国累计接种数据
8 document.getElementById('china-all').innerHTML = f(data.VaccineTopData.中国.total_vaccinations);
9 document.getElementById('china-add').innerHTML = f(data.VaccineTopData.中国.new_vaccinations);//渲染中国较上日新增数据
10 //渲染中国每百人接种数据
11 document.getElementById('china-per').innerHTML = f(data.VaccineTopData.中国.total_vaccinations_per_hundred);
12 function f(value){//数量过亿转换为以亿计量，过万转换为以万计量
13 if (value >= 100000000) {
14 return (value / 100000000).toFixed(1) + "<span>亿剂<\/span>";
15 }
16 else if (value >= 10000){
17 return (value / 10000).toFixed(1) + "<span>万剂<\/span>";
18 }
19 else
20 return value+ "<span>剂<\/span>";
21 }
上述代码中，第1~11行代码将Ajax获取的全球新冠疫苗实时接种数据显示在页面的相应位置。由于数据量较大，在显示时，封装函数f()将疫苗数量过亿剂转换为以“亿剂”计量，过万转换为以“万剂”计量。上述代码实现效果，如图11-8所示。
图11-8 全球新冠疫苗实时接种数据模块
6 中国累计接种趋势数据模块
设置ECharts折线图中的配置项，示例代码如下。
var option = {
//X轴
xAxis: [{
data: []
}],
//Y轴
yAxis: [{
axisLabel: {//坐标轴刻度标签的相关设置
formatter: function(value) {//Y轴文本样式自定义设置
if (value >= 100000000) {//如果数值大于1亿
value = value / 100000000 + '亿';
}
return value;
}
}
}],
//系列列表
series: [{
type: 'line',// 图形类型
data: []
}]
};
上述代码中，option.xAxis[0].data存储X轴日期数据，option.series[0].data存储每日累计接种数据，option.yAxis[0].axisLabel.Formatter方法自定义Y轴文本样式。
数据渲染，填充X轴日期数据和系列数据，示例代码如下：
for(var i=0;i< data.ChinaVaccineTrendData.length;i++)
{
option.xAxis[0].data.push(data.ChinaVaccineTrendData[i].date);
option.series[0].data.push(data.ChinaVaccineTrendData[i].total_vaccinations);
}
遍历返回的中国累计接种趋势数据，将每一项的date属性值存入折线图配置项的option.xAxis[0].data中，total_vaccinations属性值存入折线图配置项的option.series[0].data中，实现效果如图11-9所示。
图11-9 中国累计接种趋势数据模块
7 中国每百人接种趋势数据模块
中国每百人接种趋势数据模块与中国累计接种趋势数据模块的区别：
（1）由于数量小，配置项option.yAxis[0].data.axisLabel.Formatter无须自定义。
（2）total_vaccinations_per_hundred属性保存了中国每百人接种数据；total_vaccinations属性保存了中国累计接种数据，因此本模块将total_vaccinations_per_hundred属性值存入折线图配置项的option.series[0].data中即可，其余配置项和JavaScript代码无须改动。实现效果如图11-10所示。
图11-10 中国每百人接种趋势数据模块
8 全国疫情实时追踪数据模块
将数据渲染在页面指定位置，示例代码如下：
//渲染本土现有确诊数据
document.getElementById('localConfirm').innerHTML =data.chinaTotal.localConfirm;
//渲染现有确诊数据
document.getElementById('nowConfirm').innerHTML =data.chinaTotal.nowConfirm;
//渲染累计确诊数据
document.getElementById('confirm').innerHTML =data.chinaTotal.confirm;
//渲染无症状感染者数据
document.getElementById('nowSevere').innerHTML =data.chinaTotal.noInfect;
//渲染境外输入数据
document.getElementById('import').innerHTML =data.chinaTotal.importedCase;
//渲染累计死亡数据
document.getElementById('dead').innerHTML =data.chinaTotal.dead;
上述代码实现效果，如图11-11所示。
图11-11 全国疫情实时追踪数据模块
9 全国疫情柱状模块
（1）全国疫情实时追踪数据格式如图11-12所示。其中data.areaTree[0].children是一个数组，每一项的name属性保存了省份的名称，total属性的nowConfirm保存了现有确诊数。
图11-12 全国疫情实时追踪数据
（2）设置ECharts柱状图中的配置项，示例代码如下。完整配置项代码，详见本书案例中的“折线图饼图柱状图_配置项.js”文件。
var option = {
yAxis: {
type: 'category',
data: []
},
series: [
{
type: 'bar',// 图形类型
data: []// 数值
}
]
};
其中，在柱状图上渲染的数据保存在option.series[0].data中，每一个省份的名称保存在yAxis.data中。
（3）数据渲染，填充每一个省份的数据，示例代码如下：
var provinces = data.areaTree[0].children;//获取所有省份数组
for (var i = 0; i < provinces.length; i++) {
if(provinces[i].name=='香港'||provinces[i].name=='澳门'||provinces[i].name=='台湾')
continue;
option.series[0].data.push(provinces[i].total.nowConfirm);
option.yAxis.data.push(provinces[i].name);
}
上述代码实现效果，如图11-13所示。
图11-13 全国疫情柱状图模块
10 全国现有确诊人数TOP10模块
（1）将9中获取到的每个省份的现有确诊总数进行排序，计算出排在前10位的省份数据。示例代码如下：
var provinces = data.areaTree[0].children; //获取所有省份数组
var topData = [];
//所有省份数据放入数组topData中
for(var i=0;i< provinces.length;i++){
topData.push({
'name':provinces[i].name,
'value':provinces[i].total.nowConfirm
});
}
// 降序排列
topData.sort(function(a,b){
return b.value-a.value;
});
// 只保留前10条
topData.length = 10;
（2）设置ECharts中饼图的配置项，示例代码如下。
var option = {
//系列列表
series: [
{
type: 'pie',// 图形类型
data:[],//数据
}
]
};
其中，option.series[0].data存放渲染饼图的数据。
（3）数据渲染，填充前10位的省份数据，示例代码如下：
for(var i=0;i< topData.length;i++)
{
option.series[0].data.push(topData[i]);
}
上述代码运行效果，如图11-14所示。
图11-14 全国现有确诊人数TOP10模块
视频讲解：HTML+CSS+JavaScript+Ajax+ECharts实现疫情实时监控大屏_哔哩哔哩_bilibili