代码制作全国疫情图,并WordPress调用[建站教程]

代码制作全国疫情图,并WordPress调用

代码制作全国疫情图,并WordPress调用[建站教程]

代码制作全国疫情图,并WordPress调用[建站教程]

使用教程

调用方法很简单,找到WordPress后台小工具,添加自定义html内容,填入如下代码

<iframe src="https://www.lovestu.com/api/project/cnmapyinqing/obj.php" height="500" frameborder="no" border="0" width="100%"> </iframe>

保存即可在前台查看到地图。其他操作无需我们修改,每天自动实时更新。

代码制作全国疫情图,并WordPress调用[建站教程]

更新日志

2020.2 更新地图界面

添加详细信息:确诊人数,疑似人数,治愈人数,死亡人数

代码制作全国疫情图,并WordPress调用[建站教程]

 

以下为公众号原文:

闲着也是闲着,果核看很多大公司,上线了实时疫情图,能很方便的让我们察觉全国的疫情情况,为了方便大家上果核也能随时看到,于是果核也做了一个实时疫情图。

目前网站的侧边栏可以看到。

疫情图比较简单,鼠标触碰上去以后,可以看到实时的确诊数据。

代码制作全国疫情图,并WordPress调用[建站教程]

看起来不错吧,那我们来实时的撸一个。

不会代码的同学可以跳过这儿,直接到文章末尾,有教你怎么调用的。

首先,数据的爬取,经过对比,目前能实时显示数据的网站有两家,一个是网易另一个是丁香医生。

那么我们就使用前端+PHP来制作一个这个地图。

1.地图选择

要使用JS绘制中国地图,需要选择一个库,目前可以用的前端地图绘制库还是很多的,有raphael.js,D3JS,echarts,highmaps.js

经过对比,发现highmaps的调用是最简单的。

 

代码制作全国疫情图,并WordPress调用[建站教程]

 

实例的代码量非常少,并且体积控制得最小

<div id="map" style="width:800px;height: 500px;"></div><script src="https://img.hcharts.cn/highmaps/highmaps.js"></script><script src="https://data.jianshukeji.com/geochina/china.js"></script><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 属性进行关联  }]});</script>

可以看到,调用中国地图坐标后,通过highmaps计算,在id为map的div元素上绘制了中国地图。

并且上面的随机数据,可以替换成疫情数据。

默认触碰效果如图

 

代码制作全国疫情图,并WordPress调用[建站教程]

 

2.数据获取

果核找了半天没有找到官方的数据接口,所以只能抓取数据了。选择丁香医生的前端网页:https://3g.dxy.cn/newh5/view/pneumonia

代码制作全国疫情图,并WordPress调用[建站教程]

通过分析数据,发现网页的数据不是异步加载的,是直接写在网页里面的

包含了各省市各地区的数据

代码制作全国疫情图,并WordPress调用[建站教程]

 

首先把数据截取下来,看看数据的结构,解析后,发现json数据结构如下

代码制作全国疫情图,并WordPress调用[建站教程]

我们的地图数据肯定是不能直接拿来用的,所以得自己获取数据,解析成上面代码中[{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;    }

这时候,数据已经变成了我们需要的数据了。

代码制作全国疫情图,并WordPress调用[建站教程]

那么,接下来就是修改最开始的前端代码,这儿既然使用PHP,那就直接一步到位,不用异步调用。

并且,为了解决不每次访问都去爬取一次丁香医生的网站,所以访问的功能得单独提取出来,设置为半小时或者一小时实时访问一次,并且把数据存入文件,每次访问前端,就直接读取文件就行了,能加快访问的速度。

使用宝塔定时任务,或者手动访问单一PHP文件即可,这儿不多赘述。

最后,设置地图的主题色为红色,并且修改标题内容,简单地图制作完成代码制作全国疫情图,并WordPress调用[建站教程]
为了方便大家调用,果核把网页做成了组件,大家只需要引用这个网页即可。
<iframe src="https://www.lovestu.com/api/project/cnmapyinqing/obj.php" height="500" frameborder="no" border="0" width="100%"> </iframe>
WordPress,找到小工具,添加一个自定义html栏目,填入代码,即可使用:
 
代码制作全国疫情图,并WordPress调用[建站教程]

人已赞赏
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
有新消息 消息中心
搜索