第一步：安裝依賴和全域性註冊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 資料載入註冊了一遍，詳見第二步的倒數第二句

成品： 噹噹噹當~~~~