【highcharts】highcharts(highmaps)实现疫情地图（一看就会篇）

【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，但是我把我做项目的时候遇到的问题都分享出来了，大家可以避免踩很多坑。

各位学长学姐知道其他简单的汉化方法的可以评论区告诉我，谢谢大家了！