如何使用Echarts图表插件制作一个地图

因为项目需要，需要使用Echarts生成一个地图，不长使用Echarts，但还是制作出来了，所以来分享下。也为了自己以后方便查找，第一次写博客，有什么不对的，希望大家可以提出来。
首先下面是一张效果图：

这是一个安徽省的地图。怎么制作的呢？
首先，我们先把基本的事前工作做好，比如创建地图容器，引入Echarts的文件等等

<div id="map"></div>

Echarts文件的话 我是直接在CDN官网上拉下来的，各位如果有的话自便

<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script>

我使用的地图是Echarts官方文档中的 https://echarts.baidu.com/examples/editor.html?c=map-HK样式。

基本不难，主要是他里面的经纬度的json文件比较难搞，我推荐大家可以上阿里云的地图选择器上面去下载地图json文件。建议大家不要怕麻烦，可以把json文件下载下来，尽量不要用线上地址，万一哪一天不能用了呢，是吧？

json文件都拿下了，那就基本没有什么难度的了，以下是整个的制作代码：

login = {
			init: function() {
				var _this = this;
				var url = 'mapJson/anhui/anhui.json' //这个是我们在阿里云的网站上下载的安徽省的省级地图
				_this.getEcharts(url);
			},

			//地图
			getEcharts: function(url) {
				var getUrl = "";
				var areaNum = "";
				//定义容器
				var myChart = echarts.init(document.getElementById('map'));
				myChart.showLoading();
				$.get(url, function(geoJson) {
					var datas = [];
					if(geoJson.features.length) {
						$.each(geoJson.features, function(index, item) {
							console.log("这是原始数据",item)
							//测试数据所以Value值为随机选取的数据
							var value = Math.random() * 1100;
							var information = item.properties;
							//将需要的属性添加进数组datas中，这个数据有很多，可以根据你项目中的具体需要，自行添加
							datas.push({
								name: information.name,
								value: value,
								adcode: information.adcode, 
								level: information.level,
								parent: information.parent,
								childrenNum: information.childrenNum
							})
						});
					}
					//查看当前数据
					console.log("这是最新数据",datas)
					myChart.hideLoading();
					echarts.registerMap('AH', geoJson);
					var option = {
						//标题
						title: {
							text: '安徽应急救援信息管理',
							subtext: '数据信息来源于**科技有限公司',
						},
						tooltip: {
							trigger: 'item',
							formatter: '{b}<br/>{c} (p / 起)'
						},
						toolbox: {
							show: true,
							orient: 'vertical',
							left: 'right',
							top: 'center',
							feature: {
								dataView: {
									readOnly: false
								},
								restore: {},
								saveAsImage: {}
							}
						},
						//地图根据属性来改变颜色
						visualMap: {
							min: 100,
							max: 1000,
							text: ['High', 'Low'],
							realtime: false,
							calculable: true,
							inRange: {
								color: ['#0055F9', '#6FF151', 'yellow', '#FF4417']
							}
						},
						series: [{
							name: '**********',
							type: 'map',
							mapType: 'AH', // 自定义扩展图表类型
							zoom:1, //设置地图在父级div里面的大小，1为默认大小
							itemStyle: {
								//普通状态下的样式
								normal: {
									//设置在默认的情况下，地图的边框的颜色，宽度及背景色
									borderColor: "#ffffff",
									borderWidth: 0,
									areaColor: "#272235", //在上面设置了根据value值来修改背景色之后为无效的，切记哦
									shadowColor: '#ffffff',
									shadowBlur: 30,
									label: {
										show: true,
										textStyle: {
											color: "white",
											fontSize: "12"
										}
									}
								},
								//被选中状态下的样式
								emphasis: {
									//设置悬浮状态下，背景色的渐变，如果下面设置了背景色了 则无效
									areaColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: "rgba(182, 152, 92,1)"
										},
										{
											offset: 0.5,
											color: "rgba(248, 244, 197,1)"
										}
									]),
									//被选中下的背景色，如果设置了，上面的渐变则无效
									//areaColor: "white",
									//被选中下的边框
									borderColor: "gold",
									label: {
										show: true,
										textStyle: {
											color: "#624620"
										}
									}
								}
							},
							//上面我们获取的数据，将在这里绑定
							data: datas
						}]
					};
					//初始化实例
					myChart.setOption(option);
				})
			}
		};
		$(document).ready(function() {
			login.init()
		})

这样的话一个简单的地图就制作完成了。Echart地图的难度不是很大，主要就是他里面地区的经纬度的json数据比较难弄一点。希望对你们能有帮助。