要实现广东省地图下钻，需要一份广东省的json文件，项目已上传至github：https://github.com/Maybegit/-，自己自行下载拿数据，接下来我讲讲主要实现步骤：

1.首先要定义一个存放地图数据的变量
   let mapData = null;
2.中山市和东莞市是没有区的所以要处理一下
   let noDrillCity = ['中山市','东莞市'];
3.搞一个变量判断下是否已经下钻，这个东西很有用，单独选中的逻辑应该要用到它
   let isDrilled = false;
4.创建图表实例
  let chart = echarts.init(document.getElementById('box'));
5.获取地图数据并注册广东地图
  $.getJSON('json/json_gd/GuangDong.json', function(data){
    mapData =  data;
    echarts.registerMap('广东省', mapData['广东省']);
  // 绘制广东地图 地图init在drawMap方法里面以及setOption
    drawMap('广东省', mapData['广东省'])});
6.drawMap事件封装
   function drawMap(map, data) {
    //防止重复注册
   if (!echarts.getMap(map)) echarts.registerMap(map, data);
  let mapDataArr = [];
  // console.log(data)
  data.features.forEach(function (item) {
      //如果名字name跟数据匹配上
     if (item.properties.name === map) {
          mapDataArr.push({
              name: item.properties.name,
              administrativeCode: item.properties.adcode,//行政代码
              cp: item.properties.cp,
              level: item.properties.level,//是市还是区 级别
              label: {
                  normal: {show: false},
                  emphasis: {show: false}
              },
              itemStyle: {
                  normal: {
                      borderWidth: 0,
                      shadowColor: '#45a7f9',
                      shadowBlur: 30
                  },
                  emphasis: {
                      opacity: 0
                  }
              }
          });
      } else {//做额外的处理
          mapDataArr.push({
             name: item.properties.name,
              administrativeCode: item.properties.adcode,
              cp: item.properties.cp,
              level: item.properties.level
          });
      }
  });
7.初始化的option设置
  let option = {
    backgroundColor: '#666',
    geo: {
        map: map,
        zlevel: 1,
        z: 1,
        itemStyle: {
            normal: {
                borderWidth: 2,
                borderColor: '#0356b2',
                areaColor: '#242539'
            },
            emphasis: {
                borderWidth: 0,
                // areaColor: '#144393',
                areaColor: '#ffff00',
                shadowColor: '#8dc6ea',
                shadowBlur: 30
            }
        },
        label: {
            normal: {
                color: '#fff',
                show: true,
                // fontSize: 20,
                // formatter: value => {
                //     return value.name.substring(0, 2)
                // }
            },
            emphasis: {
                color: 'red'
            }
        },
        regions: mapDataArr
    }
};

chart.setOption(option);

接下来是比较重要的下钻功能了，大家一起看看：
// 地图点击事件
chart.on('click', function(param) {
// console.log('clickMap...', param);
isDrilled = mapData[param.name];
if (isDrilled) {
//避免重复画地图
if (noDrillCity.includes(param.name)) return;
drawMap(param.name, mapData[param.name]);
} else {
// drawMap('广东省', mapData['广东省']);
selectedArea(param)
}
});

9.实现单独选择区域（主要是name=》selected设置为true）
//单独选中某个区域单独显示
function selectedArea(params) {
var name = params.name;
console.log(name)
chart.setOption({
geo:{
type:'map',
regions:[{
name:name,
selected:true
}]
}
})
}
好了，以上是js部分的全部核心代码，html、css部分请参考github，接下来上一波效果图：

image.png

image.png

希望能够给大家带来帮助，感谢大家赏脸观看！谢谢。