【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
}
];
// 初始化图表
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，但是我把我做项目的时候遇到的问题都分享出来了，大家可以避免踩很多坑。
各位学长学姐知道其他简单的汉化方法的可以评论区告诉我，谢谢大家了！
