疫情期间，各类应用系统、大数据系统为防疫抗疫带来了巨大助力。国家博物馆首次将代码列为藏品，那就是抗击疫情期间来自阿里程序员写的健康码第一行代码以及研发人员的签名。这展现了广大程序员在疫情面前，争当勇敢的“逆行者”，为战“疫”贡献力量的职业担当。责任担当精神是新时代中国精神的重要组成部分。在对抗疫情中，全国人民用实际行动携手抗疫，展现出了中华民族的责任担当精神。我们要学习对抗疫情中展现的新时代责任担当精神，从而提高道德素养，培养责任担当意识；强化知识学习，培养责任担当本领；注重社会实践，培养责任担当能力；并将疫情中的责任担当精神内化于心，外化于行。

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

源码：清华大学出版社-图书详情-《JavaScript前端开发与实例教程（微课视频版）》

HTML+CSS+JavaScript+Ajax+ECharts实现疫情实时监控大屏-2设计与实现相关推荐

HTML+CSS+JavaScript+Ajax+ECharts实现疫情实时监控大屏-1快速上手
1 ECharts简介 ECharts是一款开源的基于JavaScript的数据可视化图表库,可以流畅地运行在PC和移动设备上,兼容当前绝大多数浏览器.它底层依赖矢量图形库ZRender,支持超过1 ...
别人家的防疫实时监控大屏是怎么做的？方法和技巧都在这里了
复工返学高峰季是疫情防控的要紧时期,引起了全国企业和高校的高度重视.不少公司和学校将信息化手段应用到了防疫工作中,数字大屏可以用做防疫数据监控的前端平台,也能通过数据展示警醒大家不可放松警惕,在防疫数 ...
【云驻共创】华为云之手把手教你搭建IoT物联网应用充电桩实时监控大屏
文章目录前言 1.什么是充电桩 2.什么是IOT 3.什么是端.边.云.应用协同 4.什么是Astro轻应用一.玩转lOT动态实时大屏(线下实际操作) 1.Astro轻应用说明 1.1 场景说明 ...
推荐一款清爽的实时监控大屏附安装教程
点击▲关注 "爪哇妹" 给公众号标星置顶更多摄影技巧第一时间直达前言前段时间分享了一个支付监控大屏,好多小伙伴在问撸主是怎么实现的,所以花几分钟时间跟大家分享一下. 预览 ...
Serverless 开发，基于 IoT物联网 + 表格存储DB + DataV 搭建实时环境监控大屏
今天给大家带来基于阿里云 IoT 物联网平台 + Tablestore 表格存储数据库 + DataV大屏三大云产品组合搭建实时环境监控大屏的开发实战. 少啰嗦,先看效果. 部署后效果 1.技 ...
利用爬虫实现全国疫情实时监控（手机版）
文中分为六个部分,介绍如何用python等工具实现定时爬虫,完成全国疫情实时监控项目.主要用到工具:PyCharm (代码编写),python(版本为3.7.6,后台代码结构设计),Hbuilder ...
HTML5期末大作业：网站——响应式网络游戏官网HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板 ~简单个人网页
HTML5期末大作业:网站--响应式网络游戏官网HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板 ~简单个人网页 ...
HTML5期末大作业：网站——卡通漫画游戏官方网页 (萌王) 13个页面 HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计
HTML5期末大作业:HTML5期末大作业:网站--卡通游戏官方网页 (萌王)HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个 ...
HTML5期末大作业：网站——卡通漫画游戏官方网页 (萌王) 13个页面 HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计...
HTML5期末大作业:HTML5期末大作业:网站--卡通游戏官方网页 (萌王)HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个 ...

HTML+CSS+JavaScript+Ajax+ECharts实现疫情实时监控大屏-2设计与实现