echarts生成湖南省地图

利用echarts生成湖南省地图，默认选中长沙市，点击各市可切换选中的市，选中的市会高亮显示。

注意：益阳市名称显示有点偏差，应该是我那个json文件数据导致的，各位重新去找一份地图的json数据就行。

我的json数据来自于：http://datav.aliyun.com/tools/atlas/#&lat=31.769817845138945&lng=104.29901249999999&zoom=4

地图生成代码参考：https://blog.csdn.net/weixin_41187842/article/details/81220293

我的效果图如下：

主要代码如下：

// 初始化湖南地图
initHunanMap() {
	var that = this
	echarts.registerMap('hunan', hunanMapData);
	console.log('湖南的数据:',hunanMapData)
    this.$nextTick(function() {
        setTimeout(function(){
        	var myChart = echarts.init(document.getElementById('hunanMap'));
        	that.option = {
	        	tooltip: {
		            trigger: 'item',
		            formatter: '{b}<br/>'
		        },
		        series: [
		            {
		                type: 'map',
		                mapType: 'hunan',
		                label: {
		                    show: true
		                },
		                itemStyle: {
	                        normal: {
	                            borderColor: '#4a86fd', //区域边框颜色
	                            areaColor: '#bfdfe0', //区域填充颜色
	                        },
	                        emphasis: { //鼠标事件区块样式
	                            areaColor: '#4380fd',
	                            borderWidth: 0
	                        }
	                    },
	                    data: [
			              {name: that.cityName, selected: true} // 选中某市
			            ]
		            }
		        ]
		    }
        	myChart.setOption(that.option);
		    myChart.on('click', function(params) {
				var country = params
				var countryCode = null
				that.cityName = params.name
				for (var i = 0; i < that.hunnaShiMap.length; i++) {
			        if (params.name == that.hunnaShiMap[i].name) {
			          countryCode = that.hunnaShiMap[i].code
			        }
			    }
			    // 切换选中的区域（高亮）
			    that.option.series[0].data[0]={
					name: params.name, selected: true
				}
				myChart.setOption(that.option);
			    that.currentIndex = 0
			    server.getInvestmentEnvironmentInfo(countryCode).then(function(res){
					if (res.data) {
						that.cityDes={
							physicalGeography: res.data.physicalGeography,
							infrastructure: res.data.infrastructure,
							economicDevelopment: res.data.economicDevelopment
						}
						that.desc=res.data.physicalGeography
					} else {
						that.desc= ''
					}
				})
			})
        }, 500 )
    });
}

mounted:function(){
	this.initHunanMap();
}