在线客服
扫描二维码
下载博学谷APP
扫描二维码
关注博学谷微信公众号
开年就来势汹汹的新型冠状病毒，从疫情扩散到初见好转，无时无刻不在牵动着大众的心，隔离在家的每个人每天共同关注的就是疫情发展情况。这个时候，丁香医生的出现无疑帮助了大众对于疫情的实时追踪。那么丁香医生28亿多浏览量的实时疫情界面是如何实现的呢？下面我们从前端的角度，分析一下丁香医生实时疫情界面的成功之处。
1、页面布局
从前端的角度分析，丁香医生作为一个基于微信公众号的移动端H5页面，主要针对手机端用户的访问浏览，做了移动端的适配。在页面的布局展示上，主要是做各种数据的展示和实时播报，各种图表的使用也是必须的。比如简洁醒目的地理位置图、热点图、曲线图等，既形象又生动的为我们展示了疫情发展的实时动态。
2、数字统计
在实时疫情的前端界面中，与疫情相关的数字统计是大众最为关心的信息。比如展示确诊、疑似、死亡、治愈人数等，丁香医生在进行这些数字展示的时候，使用了CSS技术，对字体的大小、颜色等方面进行了强调突出。这些细节的考虑和设计，更体现了丁香医生的前端界面设计的细心。版本迭代后的最新数字统计增加了海外疫情版块，数字的表达也更加直观。
3、地图的可视化应用
另外，实时疫情的地理分布情况，也是大家关心的一大重点。说到地理分布情况，就必然要使用地图的可视化应用。从前端界面的角度来看，实时疫情地图页面采用React作为单页应用的基础骨架实现，地图部分采用echarts作为可视化渲染成份。在技术实现上有许多开源的可视化库来直接使用，如百度的Echarts、C3.js、Chart.js、FlexChart等，可以参考相应的官方文档。在使用地图可视化的时候，有一点不得不提，一定要注意地图的完整性和敏感区域的归属问题，领土完整性一定要重视。
分析完丁香医生的实时疫情前端界面，我们不得不承认前端工程师的重要性。在当下这个颜值即是正义的时代，无论后端功能如何支撑，如果没有优秀的前端界面展示，都难以得到用户的青睐和喜爱。因此，前端不再仅仅只是许多人以为的面子，它早就成为一个产品成败的关键因素之一。
— 申请免费试学名额 —
在职想转行提升，担心学不会？根据个人情况规划学习路线，闯关式自适应学习模式保证学习效果
讲师一对一辅导，在线答疑解惑，指导就业！
上一篇：
Vue.js基础入门课程推荐
下一篇：
前端面试常见知识点总结
相关推荐 更多
在线学习前端开发学习周期是多久？
在线学习前端开发学习周期是多久？之前遇到很多自学前端的朋友，他们用1-2年的时间自学，依旧没有完全掌握前端开发的运营，从而再去参加线下培训，又用了4-5个月时间，终于达到了就业的水平。然而，现在在线教育逐渐成为前端开发学习者的首选。因为在线学习前端开发的学习周期完全是可控的，一般2-6个月的时间就可以完全掌握实战项目开发。
13225
2019-08-08 11:56:46
IT前端和后端要做什么？哪个辛苦加班多？
IT前端和后端要做什么？前端开发和后端开发是软件开发的重要组成部分。前端开发主要做的是用户所能看到的前端展示界面；后端开发主要做的是逻辑功能等模块。要问哪个辛苦加班多？其实都差不多，毕竟技术研发行业都不会太轻松。
23598
2019-08-28 10:31:21
4个月学前端找不到工作吗？学前端到底要多久？
4个月学前端找不到工作吗？现在市面上到处可见，IT培训机构打着几个月速成前端的幌子，以此来招揽生源。其实学习这个东西没有什么捷径，但凡是可以保证在短短3、4个月内速成的，学习质量一定难以保障。既然在这样不靠谱的机构学习，学完能够找到工作的概率自然很低。那么学前端到底要多久呢？这个问题的答案因人而异，不过我们可以了解前端就业有哪些必备的技能和知识，下面我们就一起来看看吧！
12071
2019-10-07 15:50:24
前端开发者如何提升自我能力?对前端开发者的建议
对于众多的前端开发者来说，即使是在工作后也难免时常被这样的问题所困扰，前端开发者要如何提升自我能力?其实前端开发的道路是没有捷径的，只有不断学习和积累经验，向着自己明确的目标规划才是最重要的。下面我们来看看前端开发者具体需要学习的内容和方式。
9770
2019-11-14 16:41:42
Web前端常用插件有哪些？
Web前端常用插件有哪些？程序员在开发过程中会用到很多开发工具，作为前端开发工程师掌握一些前端插件必不可少，小编汇总了不同的Web前端常用插件分享给大家。
8016
2020-05-27 14:44:24
