閒著沒事？教你用代碼寫一個實時疫情圖

<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文件即可，這兒不多贅述。

最後，設置地圖的主題色為紅色，並且修改標題內容，簡單地圖製作完成。

---

---

閱讀更多 電腦筆記 的文章

關鍵字: 網易 實時 疫情

---