在线客服
扫描二维码
下载博学谷APP
扫描二维码
关注博学谷微信公众号
开年就来势汹汹的新型冠状病毒，从疫情扩散到初见好转，无时无刻不在牵动着大众的心，隔离在家的每个人每天共同关注的就是疫情发展情况。这个时候，丁香医生的出现无疑帮助了大众对于疫情的实时追踪。那么丁香医生28亿多浏览量的实时疫情界面是如何实现的呢？下面我们从前端的角度，分析一下丁香医生实时疫情界面的成功之处。
1、页面布局
从前端的角度分析，丁香医生作为一个基于微信公众号的移动端H5页面，主要针对手机端用户的访问浏览，做了移动端的适配。在页面的布局展示上，主要是做各种数据的展示和实时播报，各种图表的使用也是必须的。比如简洁醒目的地理位置图、热点图、曲线图等，既形象又生动的为我们展示了疫情发展的实时动态。
2、数字统计
在实时疫情的前端界面中，与疫情相关的数字统计是大众最为关心的信息。比如展示确诊、疑似、死亡、治愈人数等，丁香医生在进行这些数字展示的时候，使用了CSS技术，对字体的大小、颜色等方面进行了强调突出。这些细节的考虑和设计，更体现了丁香医生的前端界面设计的细心。版本迭代后的最新数字统计增加了海外疫情版块，数字的表达也更加直观。
3、地图的可视化应用
另外，实时疫情的地理分布情况，也是大家关心的一大重点。说到地理分布情况，就必然要使用地图的可视化应用。从前端界面的角度来看，实时疫情地图页面采用React作为单页应用的基础骨架实现，地图部分采用echarts作为可视化渲染成份。在技术实现上有许多开源的可视化库来直接使用，如百度的Echarts、C3.js、Chart.js、FlexChart等，可以参考相应的官方文档。在使用地图可视化的时候，有一点不得不提，一定要注意地图的完整性和敏感区域的归属问题，领土完整性一定要重视。
分析完丁香医生的实时疫情前端界面，我们不得不承认前端工程师的重要性。在当下这个颜值即是正义的时代，无论后端功能如何支撑，如果没有优秀的前端界面展示，都难以得到用户的青睐和喜爱。因此，前端不再仅仅只是许多人以为的面子，它早就成为一个产品成败的关键因素之一。
— 申请免费试学名额 —
在职想转行提升，担心学不会？根据个人情况规划学习路线，闯关式自适应学习模式保证学习效果
讲师一对一辅导，在线答疑解惑，指导就业！
上一篇：
Vue.js基础入门课程推荐
下一篇：
前端面试常见知识点总结
相关推荐 更多
Web前端工程师需要学习那些编程语言？
Web前端工程师需要学习那些编程语言？几年前的web前端工程师只要学会HTML和CSS就可以找到一个适合的岗位，但是在web前端快速的迭代发展过程中，前端工程师的要求也越来越高，仅仅会HTML+CSS的同学也只能拿到行业的最低薪资。一个高薪的web前端工程师需要充分掌握HTML+css、以及JavaScript和jQuery。下面具体为大家介绍这几门语言 。
10172
2019-06-20 17:54:54
Web前端开发在线培训班靠不靠谱？学了能就业吗?
目前，前端开发工程师在人才市场上可谓是格外的紧缺，不少小伙伴也看到了其中的就业机遇。想要学习前端开发，自学太慢效率太低，那么Web前端开发在线培训班靠不靠谱？学了能就业吗?针对大家的担忧，小编就来仔细分析一下博学谷培训班的课程。
7844
2019-12-16 19:11:32
JavaScript主要作用是什么？
学习编程的同学对JavaScript并不陌生，JavaScript是前端技术中非常重要的内容。例如页面的效果切换、动画效果、页面游戏等等。其实我们功通过HTML和CSS技术已经可以搭建各种样式的页面，但是向你要实现页面真正的动态效果，还需要使用JavaScript技术。下面小编就为大家详细介绍一下JavaScript主要作用是什么。
13812
2019-10-28 18:46:37
前端免费实战项目在线练习
许多初学者在一开始学习前端的时候，都容易犯这样的错误：看了很多学习前端开发的教材和课程，但是动手什么都做不出来。这里给广大前端学习者一个建议，练习和实践绝对是学习前端最好的办法。不管大家理论知识掌握得再多，不能够活学活用也等于零。下面小编将给大家分享一些前端免费实战项目，大家可以赶紧动手在线练习！
5994
2020-07-27 17:33:33
学习前端的机构哪家比较好？
先给大家讲几个前端培训机构的判断标准，行业的口碑、授课讲师的资质、课程内容的质量以及还有班级的学习氛围。可能有人要说了，我不知道怎么了解这些判断标准，不能直接推荐一个靠谱的培训机构吗？当然可以，但是直接推荐还是过于主观，不一定适合所有人。因此，最好的办法就是大家多试听几家培训机构的课程，货比三家，依照以上的几个判断标准，就一定能选出最适合你的前端培训机构。
5504
2020-08-05 17:00:22
