在线客服
扫描二维码
下载博学谷APP
扫描二维码
关注博学谷微信公众号
开年就来势汹汹的新型冠状病毒，从疫情扩散到初见好转，无时无刻不在牵动着大众的心，隔离在家的每个人每天共同关注的就是疫情发展情况。这个时候，丁香医生的出现无疑帮助了大众对于疫情的实时追踪。那么丁香医生28亿多浏览量的实时疫情界面是如何实现的呢？下面我们从前端的角度，分析一下丁香医生实时疫情界面的成功之处。
1、页面布局
从前端的角度分析，丁香医生作为一个基于微信公众号的移动端H5页面，主要针对手机端用户的访问浏览，做了移动端的适配。在页面的布局展示上，主要是做各种数据的展示和实时播报，各种图表的使用也是必须的。比如简洁醒目的地理位置图、热点图、曲线图等，既形象又生动的为我们展示了疫情发展的实时动态。
2、数字统计
在实时疫情的前端界面中，与疫情相关的数字统计是大众最为关心的信息。比如展示确诊、疑似、死亡、治愈人数等，丁香医生在进行这些数字展示的时候，使用了CSS技术，对字体的大小、颜色等方面进行了强调突出。这些细节的考虑和设计，更体现了丁香医生的前端界面设计的细心。版本迭代后的最新数字统计增加了海外疫情版块，数字的表达也更加直观。
3、地图的可视化应用
另外，实时疫情的地理分布情况，也是大家关心的一大重点。说到地理分布情况，就必然要使用地图的可视化应用。从前端界面的角度来看，实时疫情地图页面采用React作为单页应用的基础骨架实现，地图部分采用echarts作为可视化渲染成份。在技术实现上有许多开源的可视化库来直接使用，如百度的Echarts、C3.js、Chart.js、FlexChart等，可以参考相应的官方文档。在使用地图可视化的时候，有一点不得不提，一定要注意地图的完整性和敏感区域的归属问题，领土完整性一定要重视。
分析完丁香医生的实时疫情前端界面，我们不得不承认前端工程师的重要性。在当下这个颜值即是正义的时代，无论后端功能如何支撑，如果没有优秀的前端界面展示，都难以得到用户的青睐和喜爱。因此，前端不再仅仅只是许多人以为的面子，它早就成为一个产品成败的关键因素之一。
— 申请免费试学名额 —
在职想转行提升，担心学不会？根据个人情况规划学习路线，闯关式自适应学习模式保证学习效果
讲师一对一辅导，在线答疑解惑，指导就业！
上一篇：
Vue.js基础入门课程推荐
下一篇：
前端面试常见知识点总结
相关推荐 更多
Web前端技术分享：移动端页面重构
由于移动互联网的发展，我们在移动端消耗的时间越来越多，因此很多PC端的服务不断的转移到移动端，同时由于移动端的多平台话，也需要用到移动端页面的重构。作为一个web高级开发工程师而言，掌握移动端页面重构技术，会为自己增加更多的就业机会。
11635
2019-07-03 18:03:04
前端免费实战项目在线练习
许多初学者在一开始学习前端的时候，都容易犯这样的错误：看了很多学习前端开发的教材和课程，但是动手什么都做不出来。这里给广大前端学习者一个建议，练习和实践绝对是学习前端最好的办法。不管大家理论知识掌握得再多，不能够活学活用也等于零。下面小编将给大家分享一些前端免费实战项目，大家可以赶紧动手在线练习！
7285
2020-07-27 17:33:33
网站域名后缀都是什么含义？
2019年我国网站数量已经达到518万个，每一个网站都有一个唯一的网站域名。例如百度（baidu.com）、博学谷（boxuegu.com）、淘宝（taobao.com）等等。细心的同学可能会注意到大部分域名的后缀都是.com。这些网站域名后缀都是什么含义呢？应该如何选择一个适合自己的域名呢？
8234
2020-08-03 14:05:09
网站前端开发基础知识学什么？必备技能
网站前端开发基础知识学什么？Web前端开发网页制主要由HTML、CSS、JavaScript三大要素组成。随着企业需求变，前端开发技术的三要素也演变成现今的HTML5、CSS3、jQuery。响应式布局、微网站等是Web前端未来的发展方向之一。
5394
2020-08-27 15:16:06
前端是什么
我们学习新知识之初，有必要自上而下，从抽象到具体地对前端的整套体系建立基本的认知。这有助于我们快速地入门前端，并为深入学习奠定基础。
6847
2022-12-02 16:52:55
