在线客服
扫描二维码
下载博学谷APP
扫描二维码
关注博学谷微信公众号
开年就来势汹汹的新型冠状病毒，从疫情扩散到初见好转，无时无刻不在牵动着大众的心，隔离在家的每个人每天共同关注的就是疫情发展情况。这个时候，丁香医生的出现无疑帮助了大众对于疫情的实时追踪。那么丁香医生28亿多浏览量的实时疫情界面是如何实现的呢？下面我们从前端的角度，分析一下丁香医生实时疫情界面的成功之处。
1、页面布局
从前端的角度分析，丁香医生作为一个基于微信公众号的移动端H5页面，主要针对手机端用户的访问浏览，做了移动端的适配。在页面的布局展示上，主要是做各种数据的展示和实时播报，各种图表的使用也是必须的。比如简洁醒目的地理位置图、热点图、曲线图等，既形象又生动的为我们展示了疫情发展的实时动态。
2、数字统计
在实时疫情的前端界面中，与疫情相关的数字统计是大众最为关心的信息。比如展示确诊、疑似、死亡、治愈人数等，丁香医生在进行这些数字展示的时候，使用了CSS技术，对字体的大小、颜色等方面进行了强调突出。这些细节的考虑和设计，更体现了丁香医生的前端界面设计的细心。版本迭代后的最新数字统计增加了海外疫情版块，数字的表达也更加直观。
3、地图的可视化应用
另外，实时疫情的地理分布情况，也是大家关心的一大重点。说到地理分布情况，就必然要使用地图的可视化应用。从前端界面的角度来看，实时疫情地图页面采用React作为单页应用的基础骨架实现，地图部分采用echarts作为可视化渲染成份。在技术实现上有许多开源的可视化库来直接使用，如百度的Echarts、C3.js、Chart.js、FlexChart等，可以参考相应的官方文档。在使用地图可视化的时候，有一点不得不提，一定要注意地图的完整性和敏感区域的归属问题，领土完整性一定要重视。
分析完丁香医生的实时疫情前端界面，我们不得不承认前端工程师的重要性。在当下这个颜值即是正义的时代，无论后端功能如何支撑，如果没有优秀的前端界面展示，都难以得到用户的青睐和喜爱。因此，前端不再仅仅只是许多人以为的面子，它早就成为一个产品成败的关键因素之一。
— 申请免费试学名额 —
在职想转行提升，担心学不会？根据个人情况规划学习路线，闯关式自适应学习模式保证学习效果
讲师一对一辅导，在线答疑解惑，指导就业！
上一篇：
Vue.js基础入门课程推荐
下一篇：
前端面试常见知识点总结
相关推荐 更多
HTML5开发APP有哪些优点和缺点？HTML5优势和劣势大对比
HTML5开发APP有哪些优点和缺点？对比起来看，HTML5开发APP的优势明显大于劣势。比如HTML5有跨平台，开发成本低，推广更容易等等优点，同时它也有着一些缺点，比如容易受到网络的限制，用户体验性一般，变现慢等问题。本文将为大家详细分析一下，HTML5开发移动APP的优势与劣势。
7542
2019-10-23 12:45:55
什么是前端什么是后端？前端后端区别
前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。多数后端开发人员从事于构建工作应用程序背后的实际逻辑。前后端需要相互配合，共同完成一个项目。前端的工作内容就是将美工设计的效果图的设计成浏览器可以运行的网页；后端考虑的是底层业务逻辑的实现，平台的稳定性与性能等。
10220
2020-01-17 14:28:49
Vue.js基础入门课程推荐
Vue.js作为一个构建数据驱动 web 界面的渐进式框架，可以说是前端开发者不得不熟练掌握的常用框架之一。它的优点主要有对新手友好，而且语法自由。因此学习Vue.js可以说十分有必要了。本文将推荐给广大零基础学习者Vue.js基础入门课程，内容包括课程内容、亮点和大纲，下面一起来看看吧！
5601
2020-04-01 16:37:14
Uni-App入门教程学习路线分享
Uni、app 使用 Vue.js 开发跨平台应用前端框架。上手简单易学易用，开发者编写一套代码可发布到iOS、Android、H5、以及各种小程序等多个平台。有一定Vue基础或需要学习小程序开发的学员掌握uni、app多种原生小程序快速上手。
6412
2020-04-10 15:08:59
前端网页游戏开发难吗？开发工具有哪些？
随着互联网游戏行业的不断发展，做游戏开发的软件工具越来越多，在网页游戏开发时，大多数人会用的软件工具。网页游戏用什么工具开发？网页游戏开发好学吗？操作难吗？很多常见的小游戏是前端开发的，如2048、别踩白块等，简单有趣，对于初学者来说小游戏是非常不错的练手项目。
7053
2020-09-04 16:38:45
