前言：最近公司项目有个需求，展示河南省各省市区县的地图，并展示相应的数据，看了些资料决定用echarts实现。
一、完成之后的效果图

点击市的模块显示对应的市，并显示对应市的数据

点击区县的模块显示对应的区县，并显示对应区县的数据

二、实现方法
1、首先要确定已经引入的echart的文件,vue项目和html项目的引入方法不一样，在此不再赘述，童鞋们自行百度。
2、把需要用到的json文件放到本地（json文件获取的方法后续我会上传，童鞋们自行下载），在此我放到了static目录下，如下图：

3、页面中请求加载json文件，然后初始化echarts，把加载到的数据传入echarts即可，在这里直接上代码了：

<template>
	<div class="commonCenter">
		<div class="newecharts" id="mapEcharts" @click="clickmap" style="width:600px;height:600px;"></div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				mapoption: {},
				mydata: [],
				mapEcharts: null,
				name:'河南省',
				code:'410000'
			};
		},
		created(){
		},
		mounted() {
			var _this = this;
			this.$nextTick(() => {
				_this.initMap(_this.name, _this.code)
			});
		},
		methods: {
			clickmap(val) {
				var _this = this;
				this.mapEcharts.on("click", function(param) {
					var name = param.data.properties.name;
					var code = param.data.properties.adcode;
					_this.initMap(name, code+'')	
				})
			},
			initMap(name, code) {
				var _this = this;
				_this.$emit('clickmap',{code:code,name:name})
				$.getJSON(`static/json/newMapJson/${code}.json`, "", function(res) {
					echarts.registerMap(name, res, {}); //引入地图文件
					var mapData = res.features;
					
					for (let i = 0; i < mapData.length; i++) {
						mapData[i].name = mapData[i].properties.name;
						mapData[i].center = mapData[i].properties.center;
						mapData[i].value = Math.floor(Math.random() * 10 + 1);
					}
					_this.mapoption = {
						tooltip: {
							trigger: "item",
						},
						layoutCenter: ['48%', '44%'], //距离左右，上下距离的百分比
						layoutSize: 600,
						series: [{
							name: name + "专项整治",
							type: "map",
							map: name, //地图名称
							coordinateSystem: "geo", // series坐标系类型
							data: mapData, // series数据内容
							label: {
								show: true,
								color: "#fff",
								fontSize: 12,
								formatter:function(res){
								}
							},
							itemStyle: {
								normal: {
									borderWidth: 2, //边际线大小
									borderColor: "#00ffff", //边界线颜色
									areaColor: "rgb(50,131,127)", //默认区域颜色
								},
								emphasis: {
									show: true,
									areaColor: "rgba(48,131,182)", //鼠标滑过区域颜色
									label: {
										show: true,
										textStyle: {
											color: "#000",
										},
									},
								},
							},
						}, ],
						// visualMap: {
						//   min: 1,
						//   max: 10,
						//   left: "left",
						//   top: "bottom",
						//   text: ["高", "低"], // 文本，默认为数值文本
						//   realtime: false,
						//   calculable: false,
						//   inRange: {
						//     color: ["lightskyblue", "yellow", "orangered"],
						//   },
						// }
					};
					_this.mapEcharts = echarts.init(document.getElementById("mapEcharts"));
					_this.mapEcharts.setOption(_this.mapoption);
				});
			},
		},
	};
</script>
<style lang="less" scoped>
</style>

注：为了便于童鞋们上手，在这里我把加载数据和返回上一级的功能代码去掉了，只留了加载地图的代码，需要根据不同的地市加载不同数据的话可以直接写
三、结尾下载全国各地市json文件的地址（河南各省市区县的以名字命名的和区域代码命名的都已打包好上传，童鞋们可以去我博客自行下载）：
1、全国各地市json文件下载地址：
（1）http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=33.521903996156105&lng=104.29849999999999&zoom=4
（2）https://hxkj.vip/demo/echartsMap/