首页 前端知识 HTML CSS JavaScript Ajax ECharts实现疫情实时监控大屏-2设计与实现

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

2024-02-08 15:02:29 前端知识 前端哥 492 132 我要收藏

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

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(){  
转载请注明出处或者链接地址:https://www.qianduange.cn//article/1548.html
标签
jsonajax
评论
会员中心 联系我 留言建议 回顶部
复制成功!