在线客服
扫描二维码
下载博学谷APP
扫描二维码
关注博学谷微信公众号
开年就来势汹汹的新型冠状病毒，从疫情扩散到初见好转，无时无刻不在牵动着大众的心，隔离在家的每个人每天共同关注的就是疫情发展情况。这个时候，丁香医生的出现无疑帮助了大众对于疫情的实时追踪。那么丁香医生28亿多浏览量的实时疫情界面是如何实现的呢？下面我们从前端的角度，分析一下丁香医生实时疫情界面的成功之处。
1、页面布局
从前端的角度分析，丁香医生作为一个基于微信公众号的移动端H5页面，主要针对手机端用户的访问浏览，做了移动端的适配。在页面的布局展示上，主要是做各种数据的展示和实时播报，各种图表的使用也是必须的。比如简洁醒目的地理位置图、热点图、曲线图等，既形象又生动的为我们展示了疫情发展的实时动态。
2、数字统计
在实时疫情的前端界面中，与疫情相关的数字统计是大众最为关心的信息。比如展示确诊、疑似、死亡、治愈人数等，丁香医生在进行这些数字展示的时候，使用了CSS技术，对字体的大小、颜色等方面进行了强调突出。这些细节的考虑和设计，更体现了丁香医生的前端界面设计的细心。版本迭代后的最新数字统计增加了海外疫情版块，数字的表达也更加直观。
3、地图的可视化应用
另外，实时疫情的地理分布情况，也是大家关心的一大重点。说到地理分布情况，就必然要使用地图的可视化应用。从前端界面的角度来看，实时疫情地图页面采用React作为单页应用的基础骨架实现，地图部分采用echarts作为可视化渲染成份。在技术实现上有许多开源的可视化库来直接使用，如百度的Echarts、C3.js、Chart.js、FlexChart等，可以参考相应的官方文档。在使用地图可视化的时候，有一点不得不提，一定要注意地图的完整性和敏感区域的归属问题，领土完整性一定要重视。
分析完丁香医生的实时疫情前端界面，我们不得不承认前端工程师的重要性。在当下这个颜值即是正义的时代，无论后端功能如何支撑，如果没有优秀的前端界面展示，都难以得到用户的青睐和喜爱。因此，前端不再仅仅只是许多人以为的面子，它早就成为一个产品成败的关键因素之一。
— 申请免费试学名额 —
在职想转行提升，担心学不会？根据个人情况规划学习路线，闯关式自适应学习模式保证学习效果
讲师一对一辅导，在线答疑解惑，指导就业！
上一篇：
Vue.js基础入门课程推荐
下一篇：
前端面试常见知识点总结
相关推荐 更多
2019年应该如何学习前端开发
现在用户对于产品的选择不仅仅是内容的完善，同时也更加注重产品的体验以及交互，因此前端开发工程师的重要作用愈发明显。2019年已经接近一半，很多准备入行前端开发工程师的或者还在犹豫小伙伴们，不知道准备得怎么样了呢？今天来给大家讲讲，在2019年，我们学习前端开发，如何才能高效学会前端开发？
14456
2019-08-08 10:23:19
Web前端开发培训班课程怎么样？如何选择靠谱的培训班？
目前学习前端成为进入互联网主要途径之一。随着互联网技术的高度迭代更新，多平台发展，Web前端开发成为市场的娇宠，目前Web前端岗位市场需求量较大，薪资水平也处于较高水平，因此大部分同学通过参加Web前端开发培训班课程进入前端开发领域。
7567
2019-08-22 17:59:01
零基础该怎么学前端？前端学习路线规划
零基础该怎么学前端？对于完全没有基础的小白来说，前端自学的难度还是很大的，因此强烈建议报培训班进行循序渐进地学习。博学谷的前端就业班，专门为零基础学员开设，带大家从入门到精通最后直达就业。下面是该课程的前端学习路线规划，大家有兴趣的可以报名试听体验一下。
8003
2019-09-09 19:24:50
十个实用的CSS代码技巧整理
为了让大家高效率的进行工作，本文归纳总结了十个实用的CSS代码技巧，希望对大家能有所帮助。简单来说，这十大技巧分别是注意外边距折叠，使用flex进行布局，所有元素设置为Border-box，重置元素的CSS样式，使用transform属性来创建动画，短横线命名，不要使用!important，使用AutoPrefixer达到更好的兼容性，Caniuse和验证。
7316
2019-11-10 14:57:03
前端是做什么的？工作内容有哪些？
随着互联网全面进入移动时代，前端逐渐成为互联网行业中的重要角色。前端是做什么的？工作内容有哪些？简单来讲，前端要做的就是将产品的UI设计稿在用户终端上实现，因此可以说用户看到的所有视觉和交互都是前端的工作领域。根据这个定义，我们可以把前端的工作内容总结为根据产品的需求，配合开发和UI设计部门完成前端页面的开发，并负责前端应用的维护和优化。
14895
2020-04-21 14:21:36
