【highcharts】highcharts(highmaps)實現疫情地圖
有人可能問爲什麼不用echarts，echarts簡單容易上手啊，因爲echarts他官網沒有地圖數據的下載地址需要自己上網搜比較麻煩，並且highcharts官網有全世界的地圖，大到世界地圖小到世界各地市區地圖，都是比較全的，後期加個下鑽功能也是比較方便容易的。
一，highcharts使用介紹
Highcharts 是一個用純 JavaScript 編寫的一個圖表庫， 能夠很簡單便捷的在 Web 網站或是 Web 應用程序添加有交互性的圖表，並且免費提供給個人學習、個人網站和非商業用途使用。
注意
如果您既想做地圖又想做圖表，那麼您只需要從官網下載文件，並且引入
highcharts.js + map.js
官網地址：官網地址
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/highmaps/modules/map.js"></script>
如果您只需要實現地圖的功能，那麼只需要 highmaps就ok.
highmaps下載地址：https://www.highcharts.com.cn/download
<script src="http://cdn.highcharts.com.cn/highmaps/8.0.4/highmaps.js"></script>
二，開始使用
1.首先你需要有一個具有寬高的dom元素
<div id="container" style="width: 600px;height:400px;"></div>
2.你需要中國地圖和世界地圖的js數據,地址https://img.hcharts.cn/mapdata/選擇js文件，然後他會打開一個網頁，你把內容全選並且複製到你的記事本里，把記事本後綴txt，改成json數據就算是完成了。
並且引用他們
<script src="./Js/China.json"></script>
<script src="./Js/word1.json"></script>
3.然後初始化charts，然後寫入數據，並且配置它，就直接上成品代碼，大家往裏套就好
var map_china_tol_data = [{
"name": "北京",
"value": 480
},
{
"name": "天津",
"value": 136
}, {
"name": "河北",
"value": 318
}, {
"name": "山西",
"value": 133
}, {
"name": "內蒙古",
"value": 75
}, {
"name": "遼寧",
"value": 125
}, {
"name": "吉林",
"value": 93
}, {
"name": "黑龍江",
"value": 483
}, {
"name": "上海",
"value": 363
}, {
"name": "江蘇",
"value": 631
}, {
"name": "浙江",
"value": 1233
}, {
"name": "安徽",
"value": 990
}, {
"name": "福建",
"value": 296
}, {
"name": "江西",
"value": 935
}, {
"name": "山東",
"value": 761
}, {
"name": "河南",
"value": 1273
}, {
"name": "湖北",
"value": 67800
}, {
"name": "湖南",
"value": 1018
}, {
"name": "廣東",
"value": 1378
}, {
"name": "廣西",
"value": 253
}, {
"name": "海南",
"value": 168
}, {
"name": "重慶",
"value": 576
}, {
"name": "四川",
"value": 540
}, {
"name": "貴州",
"value": 146
}, {
"name": "雲南",
"value": 176
}, {
"name": "西藏",
"value": 1
}, {
"name": "陝西",
"value": 246
}, {
"name": "甘肅",
"value": 133
}, {
"name": "青海",
"value": 18
}, {
"name": "寧夏",
"value": 75
}, {
"name": "新疆",
"value": 76
}, {
"name": "臺灣",
"value": 108
}, {
"name": "香港",
"value": 109
}, {
"name": "澳門",
"value": 110
}, {
"name": "南海諸島",
"value": 0
}, {
"name": "南海諸島",
"value": 0
}
];
// 初始化圖表
//map_china_tol：你的dom元素的id名
var map = new Highcharts.Map('map_china_tol', {
title: {
text: '中國累計確診'
},
mapNavigation: {
enabled: true,
enableButtons: false,
enableTouchZoom:false,
enableDoubleClickZoomTo: true
},
legend: {
align: 'left',
verticalAlign: 'top',
floating: true,
x: 0,
y: -20
},
colorAxis: {
dataClasses: [{
to: 1,
color: 'white',
}, {
from: 1,
to: 59,
color: '#f2ab9a',
}, {
from: 59,
to: 599,
color: '#f96c4e',
}, {
from: 599,
to: 2999,
color: '#f13c10',
}, {
from: 2999,
color: '#500b00',
}],
},
series: [{
data: map_china_tol_data,
name: '現存確診',
mapData: Highcharts.maps['cn/china'],
joinBy: 'name' // 根據 name 屬性進行關聯
}]
});
還有一點需要注意
mapData: Highcharts.maps['cn/china'],
這個地方，需要和你地圖數據的js文件的
這個位置對應上，不然是跟沒有地圖數據是一樣的，一片空白。
我做的這個支持雙擊放大，鼠標滾輪放大，但是不支持手機的手勢操作，想要添加手勢操作的同學 把enableTouchZoom:false的false改成ture就好了。
4.世界地圖注意
下載過世界地圖的同學可能知道，世界地圖國家名稱都是英文的，那麼如何改成中文的呢，
{
"type": "Feature",
"id": "US",
"properties": {
"hc-group": "admin0",
"hc-middle-x": 0.70,
"hc-middle-y": 0.68,
"hc-key": "us",
"hc-a2": "US",
"name": "美國",
//解決方法
//這個name原來是英文，改成中文，
//然後在js配置數據的時候，你的名字就可以是中文的了
//不過這個name要和你js配置數據的name保持一致，不然是無效的
"labelrank": "2",
"country-abbrev": "U.S.A.",
"subregion": "Northern America",
"region-wb": "North America",
"iso-a3": "USA",
"iso-a2": "US",
"woe-id": "23424977",
"continent": "North America"
},
解決方法就是我註釋中提到的這些了，這是個笨方法只能一個個改，
原諒我才疏淺陋，其他漢化方法我還沒想到。
以上就是我在做完疫情地圖這個項目之後的總結，可能比較low，但是我把我做項目的時候遇到的問題都分享出來了，大家可以避免踩很多坑。
各位學長學姐知道其他簡單的漢化方法的可以評論區告訴我，謝謝大家了！