因为新冠肺炎疫情防控要求，相信现在很多朋友都还是在家里呆着没有出去，我们在关注疫情变化的时候都可以看到现在很多大公司都上线了实时疫情图，能很方便的让我们察觉全国的疫情情况，闲着也是闲着，今天就来给大家跟想一个自己制作一个实时疫情图的方法。
疫情图比较简单，用鼠标或者手指触碰上去以后，可以看到实时的确诊数据。
看起来不错吧，那我们来实时的撸一个。
首先，数据的爬取，经过对比，目前能实时显示数据的网站有两家，一个是网易另一个是丁香医生。
那么我们就使用前端+PHP来制作一个这个地图。
1、地图选择
要使用JS绘制中国地图，需要选择一个库，目前可以用的前端地图绘制库还是很多的，有raphael.js，D3JS，echarts，highmaps.js，经过对比，发现highmaps的调用是最简单的。
实例的代码量非常少，并且体积控制得很好，所以体量也很小。
<script>
// 随机数据
var data = [{"name":"北京","value":72},{"name":"天津","value":44},{"name":"河北","value":90},{"name":"山西","value":91},{"name":"内蒙古","value":68},{"name":"辽宁","value":73},{"name":"吉林","value":76},{"name":"黑龙江","value":29},{"name":"上海","value":18},{"name":"江苏","value":80},{"name":"浙江","value":87},{"name":"安徽","value":58},{"name":"福建","value":43},{"name":"江西","value":9},{"name":"山东","value":89},{"name":"河南","value":94},{"name":"湖北","value":16},{"name":"湖南","value":83},{"name":"广东","value":76},{"name":"广西","value":71},{"name":"海南","value":82},{"name":"重庆","value":81},{"name":"四川","value":8},{"name":"贵州","value":15},{"name":"云南","value":49},{"name":"西藏","value":91},{"name":"陕西","value":64},{"name":"甘肃","value":58},{"name":"青海","value":1},{"name":"宁夏","value":51},{"name":"新疆","value":90},{"name":"台湾","value":79},{"name":"香港","value":31},{"name":"澳门","value":48},{"name":"南海诸岛","value":71},{"name":"南海诸岛","value":7}];
// 初始化图表
var map = new Highcharts.Map('map', {
title: {
text: '中国地图'
},
colorAxis: {
min: 0,
minColor: 'rgb(255,255,255)',
maxColor: '#006cee'
},
series: [{
data: data,
name: '随机数据',
mapData: Highcharts.maps['cn/china'],
joinBy: 'name' // 根据 name 属性进行关联
}]
});
可以看到，调用中国地图坐标后，通过highmaps计算，在id为map的div元素上绘制了中国地图。
并且上面的随机数据，可以替换成疫情数据。
默认触碰效果如图：
2、数据获取
在网上搜索了一遍，没有找到来自卫健委官方的数据接口，所以只能抓取数据了。这里建议选择丁香医生的前端网页。
https://3g.dxy.cn/newh5/view/pneumonia
通过分析数据，发现网页的数据不是异步加载的，是直接写在网页里面的，包含了各省市各地区的数据。
首先把数据截取下来，看看数据的结构，解析后，发现json数据结构如下：
我们的地图数据肯定是不能直接拿来用的，所以得自己获取数据，解析成上面代码中[{name:'省份',value:人数}]这样的数据。
首先使用PHP爬取数据，并且使用正则表达式截取这一段json
$url = "https://3g.dxy.cn/newh5/view/pneumonia";
$data = file_get_contents($url);
$pattern = '/window.getAreaStat = (.*?)\\}catch/is';
preg_match($pattern, $data, $result);
$list = json_decode($result[1]);
截取到的数据解析为数组存入变量list
通过遍历，获取到省份和确诊人数
foreach ($list as $item) {
$tmp['name'] = $item->provinceShortName;
$tmp['value'] = $item->confirmedCount;
$datalist[] = $tmp;
}
这时候，数据已经变成了我们需要的数据了。
那么，接下来就是修改最开始的前端代码，这儿既然使用PHP，那就直接一步到位，不用异步调用。
并且，为了解决不每次访问都去爬取一次丁香医生的网站，所以访问的功能得单独提取出来，设置为半小时或者一小时实时访问一次，并且把数据存入文件，每次访问前端，就直接读取文件就行了，能加快访问的速度。
使用宝塔定时任务，或者手动访问单一PHP文件即可，这儿不多赘述。
最后，设置地图的主题色为红色，并且修改标题内容，简单地图制作完成。
閱讀更多 電腦筆記 的文章
