vue + echart +map 地图实现省下钻到市

第一步：安装依赖和全局注册echart
安装步骤请看我另一篇文章vue + echart +map实现中国，省，市地图
将市的json 文件放在全局static 文件夹下，并引入

import baotoushi from '../../../static/json/huhehaoteshi.json'
import huhehaoteshi from '../../../static/json/huhehaoteshi.json'
import baotoushi from '../../../static/json/baotoushi.json'
import wuhaishi from '../../../static/json/wuhaishi.json'
。。。。。引入全部

第二步: methods里定义方法，先初始化地图实例（自己查文档加地图底色）

getDownMap(){
	let that = this;
	let chart = that.$echarts.init(document.getElementById("mapChart"));
	let name = "内蒙古";
      let option = {
        geo: {
          map: name,
          label: {
            normal: {
                show: true,
                textStyle: {
                    color: '#fff',
                    fontSize: 20
                }
            },
            emphasis: {
                textStyle: {
                    color: '#fff'
                }
            }
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(147, 235, 248, 1)',
              borderWidth: 1,
              areaColor: {//背景色
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [{
                    offset: 0, 
                    color: 'rgba(4, 129, 181, 0.2)' // 0% 处的颜色
                }, {
                    offset: 1, 
                    color: 'rgba(4, 129, 181, 0.4)' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              },
              shadowColor: 'rgba(128, 217, 248, 1)',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10
            },
            emphasis: {
              areaColor: '#389BB7',
              borderWidth: 0
            }
          },
        },
        series: [
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
          }
        ]
      }
      that.$echarts.registerMap(name,neimenggu);//这句是由于返回的时候点击某个按钮，又执行了这个方法，但是地图不能加载，所以我注册了一下，用的json 数据，可写可不写
      chart.setOption(option);//注意这句要放在registerMap后面，要不然地图就变成了双击才能下钻！！！！md，找了好久原因
}

第三步： 点击省地图里的区块，加载市地图，实现下钻

data(){
	return{
		mapList: ["呼和浩特市","包头市","乌海市","赤峰市",
		"通辽市","鄂尔多斯市","呼伦贝尔市","巴彦淖尔市",
		"乌兰察布市","兴安盟","锡林郭勒盟","阿拉善盟"]
	}
}
//下面的事件需要写在上面的getDownMap()里
chart.on('click', function(params){
	//如果数组没有代表到了区县，跳出循环
    if(that.mapList.indexOf(params.name) < 0){
        return
    }
    //根据点击的市，加载不同json
    let mapJson;
        switch(params.name){
          case '呼和浩特市':
            mapJson = huhehaoteshi;
            break;
          case '包头市':
            mapJson = baotoushi;
            break;
          case '乌海市':
            mapJson = wuhaishi;
            break;
          case '赤峰市':
            mapJson = chifengshi;
            break;
          case '通辽市':
            mapJson = tongliaoshi;
            break;
          case '鄂尔多斯市':
            mapJson = eerduosishi;
            break;
          case '呼伦贝尔市':
            mapJson = hulunbeiershi;
            break;
          case '巴彦淖尔市':
            mapJson = bayannaoershi;
            break;
          case '乌兰察布市':
            mapJson = wulanchabushi;
            break;
          case '兴安盟':
            mapJson = xinganmeng;
            break;
          case '锡林郭勒盟':
            mapJson = xilinguolemeng;
            break;
          case '阿拉善盟':
            mapJson = alashanmeng;
            break; 
        }
        //下面的name需要为“内蒙古”，而不是具体点击的市
        that.$echarts.registerMap(name,mapJson);
        chart.setOption(option);

第四步：返回省份地图我采用的是加一个“内蒙古”按钮，点击重新执行getDownMap()，但是由于chart.setOption(option);不成功，所以又用json 数据加载注册了一遍，详见第二步的倒数第二句

成品： 当当当当~~~~