【摘要】随着新型冠状病毒疫情的发展，互联网上多个平台的移动应用端都设有“全国新冠肺炎疫情实时动态”专栏，其中疫情地图功能的实现主要是基于web前端的展现以及接口数据的获取。运用web前端框架Layui技术和数据可视化图表库Eeharts实现疫情地图，在“停课不停学”网络授课期间，不仅可以结合实际应用向学生直观展现前端框架的使用方法，让学生可以在线上根据老师的讲解实现功能，并且在线下拓展疫情地图功能，而且能激发学生的学习兴趣，坚定共同抗疫的信心，培养学生的职业素养和职业情操。
【关键词】web前端；Layui；ECharts；疫情地图
2020年初爆发的新型冠状病毒(COVID一19)牵动着所有国人的心，以专业学术论坛起步的丁香园自2020年1月21日起上线疫情地图，主要版块包括疫情地图和实时播报。通过其开发的全国新冠肺炎实时动态链接，人们可以随时随地查收全国各省市的疫情发展情况。随着疫情态势的发展，丁香园不断迭代更新全国新冠肺炎疫情实时动态链接功能，包括上线发热门诊信息、防护知识合辑、全国疫情趋势图、辟谣模块、疫情订阅功能、其他国家疫情数据等等。另外，互联网上其他主流平台的移动应用端包括腾讯新闻APP、知乎APP、网易新闻APP、百度APP也上线了“全国肺炎疫情实时动态”功能。
一、技术介绍
(一)前端框架Layui
Layui是开源的模块化前端UI框架，遵循原生HTML／css／JS的书写与组织形式，体态轻盈，组件丰富，非常适合界面的快速开发，所以对于有HT—ML、CSS、JS知识基础的学生来说，比较容易上手。Layui遵循原生态的元素书写规则，所以使用Layui相当于仍是在写基本的HTML、CSS代码，但是在HTML结构上和CSS定义上也需要遵守Layui相应的规范。Layui的页面元素包括布局、颜色、图标、动画、按钮、表单、导航、选项卡、进度条、面板、表格、徽章、时间线、辅助等。Layui还提供了丰富的内置模块，使用时均可以按需加载，内置模块包括弹出层(1ayer)、日期与时间选择(1aydate)、即时通讯(1ayim)、分页(1aypage)、模板引擎(1aytpl)、数据表格(table)、表单(form)、文件上传(upload)、穿梭框(transfer)、树形组件(tree)、颜色选择器(colorpicker)、常用元素操作(element)、滑块(slider)、评分(rate)、轮播(carousel)、流加载(flow)、工具集(util)、代码修饰器(code)等。Layui有完整使用文档和丰富的代码示例，关于其引用方法、页面元素和内置模块的使用方法均可以在Layui的官方网站获取和学习。
(二)数据可视化图表库ECharts
ECharts是一款基于javascript的数据可视化图表库，可以流畅地运行在PC和移动设备上，兼容当前绝大部分浏览器。大数据时代，人们面临越来越多的海量数据，单纯的通过文本数据表达方式和分析手段高效快速的处理和使用数据变得越来越困难[2]。所谓数据可视化，是指将数据以一种方便理解的、直观形象的方式展现给用户，从而避免了用户面对一堆的数据无从下手和分析，赋予了用户对数据进行挖掘整合的能力”。疫情期间，每天全国不同省份的确诊病例、疑似病例死亡病例等等都在发生变化，如果普通群众都要去分析这些数据不免头疼和混淆，但是通过数据可视化图表库ECharts，可以将数据以普通群众易于理解和记忆的方式展示，可以更好的传达信息。ECharts 有很多特性，包括丰富的可视化类型(支持各种常见图形的展示)、多种数据格式无需转换直接使用、千万数据的前端展现、绚丽的特效等等14) ，这些特性对于提供直观、生动、可交互、可个性化定制的数据可视化图表都打好了坚实的基础。ECharts有完整的使用文档和丰富的代码示例，关于引用ECharts绘制图表导人数据、如何设置可视化图表的展示形式，均可以在ECharts的官方网站获取和学习。
二、疫情地图功能实现
疫情地图上线初期，主要有两个功能:一个是通过中国地图的方式直观展现全国各省市的疫情发展态势，通过颜色深浅标识疫情严重程度，使人们能第一时间排别疫情发展分布情况;另-一个功能是通过列表的形式展示省、市的具体数字，包括各地的累计确诊病例、当前确诊病例、治愈病例和死亡病例。虽然在后来的版本中迭代更新了很多功能，但这两个功能是疫情地图的基础功能本文就是通过前端框架Layui和数据可视化图表库ECharts实现这两个功能。
三、结语
受新型冠状病毒影响，2020年春季学期延期开学，教育部提出充分利用网络平台“停课不停学”。在疫情发展过程中，大数据、各种疫情查询人口等技术发挥了重要作用，在这种特殊时期，学生能够通过所学技术实现互联网上主流的功能，一方面可以对学生进行爱国主义教育，另一方面可以培养学生的职业情操，增强学生爱岗敬业的使命感。通过实现疫情地图功能，可以拓展学生视野，更进一步加深web前端的学习深度。
以实现疫情地图为例的Web前端技术的应用初步解析来自哈尔滨职业技术学院学报，详细内容见哈尔滨职业技术学院学报官网。
