前端实战：2天写出28亿浏览量的页面

2020年的春节“新型冠状病毒”突如其来，对于病情的控制从初见成效到境外的意外失控，每个人在做好自身防护的同时最关心的就是疫情发展情况

在这个背景下，“丁香医生”’成为了28亿+浏览量的大热。

春节宅家的期间 很多人睁开眼的第一件事从思考人生变成了看看丁香医生

丁香医生的成功也在变相的告诉我们前端工程师的重要性，网站没有前端效果的支撑，不管后端功能实现如何完善，都不能赢得客户的青睐，甚至是沦为残次品

在竞争激烈的互联网世界，我们越来越偏向于沦为视觉动物。

丁香医生实时疫情迭代路线

从设计上来说，“丁香医生”是一个基于微信公众号的移动端H5页面，主要针对手机端用户的访问浏览，做了移动端的适配。

在页面的布局展示上，主要是做数据的展示和实时播报，各种图表的使用也是必须的，如地理位置图、热点图、曲线图等，既形象又生动。

而疫情相关的数字统计是大家特别关心的，如展示确诊、疑似、死亡、治愈人数等，在进行数字展示时使用CSS技术对字体大小、颜色等做了强调突出，迭代后的最新数字统计增加了海外疫情版块，数字的表达也更加直观。

big number 界面迭代对比

疫情的地理分布情况也是大家关心的重点，这时就必然要使用地图的可视化应用。

疫情地图页面采用React作为单页应用的基础骨架实现，地图部分采用echarts作为可视化渲染成份。在技术实现上有许多开源的可视化库来直接使用，如百度的Echarts、C3.js、Chart.js、FlexChart等，可以参考相应的官方文档

在使用地图可视化的时候，有一点不得不提，一定要注意地图的完整性和敏感区域的归属问题，领土完整性一定要重视。

疫情地图的迭代

始于颜值，陷于才华，忠于人品。这句话对于互联网无处不在的今天也同样适用。而Web前端工程师的重要性不仅仅是体现在始于颜值，更是提现了一个页面的才华。