echart在开发地图时，会遇到下钻显示子区域地图数据。比如四川省，下钻到市级成都市，再下钻到区级。下载地址：DataV.GeoAtlas地理小工具系列

1、首先需要下载对应的地图，如果是联网的可以直接下载一个，实现下钻，可自行去搜索或者实现，本文主要为离线地图
2、下载需要的对应地图包后，进入下一步编辑
3、还需要拿到各个地区的经纬度，可以到网上去经纬度地方上去搜然后点击后获取，也可以在我们做的echarts地图上点击获取
最终样式

//获取方法
  myChart.on('click', (params) => {
   
        this.Show = 0
        // 获取点击的经纬度坐标时使用
        // console.log(myChart.convertFromPixel('geo', [params.event.offsetX, params.event.offsetY]));
        if (params.componentSubType === 'map') {
   
          try {
   
            this.chinaJson = require(`@/assets/MapData/${
     params.name}.json`)
            this.ClickName = params.name
            this.cityList.forEach(item =>{
   
            if(item.xzqhmc === this.ClickName){
   
              this.getDialogData(item.xzqhszDm)
              this.Restcenter()
            }
            })
          } catch (r) {
   
            // this.$message({
   
            //   message: '无本地资源',
            //   type: 'warning'
            // });
          }

        }
      })

```javascript
//放echarts的地方
<div id="main" :style="{ height: '100%', width: '100%', }" ref="myEchart"></div>

``

//引入 在scrit代码块内引入
import * as echarts from 'echarts';

//在data内引入下载的地图图片
ClickName: '四川', //空代表还没有点击城市 初始进入时的地图显示
chinaJson: require("@/assets/MapData/四川省.json"),

//echarts的初始化
init() {
   
      if (this.myChart.id !== undefined) {
   
        this.myChart.dispose(); //销毁  这是因为多次点击会出现渲染的问题，需要先销毁再渲染
      }
      let myChart = echarts.init(document.getElementById('main'), null, {
    renderer: 'svg' });//这里是让地图的清晰度更高
      echarts.registerMap('sichuan', this.chinaJson);
      this.myChart = myChart
      //点击时间监听
      myChart.on('click', (params) => {
   
        // 这个是项目用到的，可以根据需要保留this.Show = 0
        // 获取点击的经纬度坐标时使用
        // console.log(myChart.convertFromPixel('geo', [params.event.offsetX, params.event.offsetY]));
        if (params.componentSubType === 'map') {
   
          try {
   
            this.chinaJson = require(`@/assets/MapData/${
     params.name}.json`)
            this.ClickName = params.name
            this.cityList.forEach(item =>{
   
            if(item.xzqhmc === this.ClickName){
   
              this.getDialogData(item.xzqhszDm)
              this.Restcenter()
            }
            })
          } catch (r) {
   
            // this.$message({
   
            //   message: '无本地资源',
            //   type: 'warning'
            // });
          }

        }
      })
      window.addEventListener('resize', function () {
   
        myChart.resize();
      });
      echarts.registerMap("js", this.chinaJson);
      // 柱状图左边数量显示
      let scatterData = this.mapData.map((item) => {
   
        return [
          this.center[item.name][0],
          this.center[item.name][1],
        ];
      });
      let option =
        {
   
          backgroundColor: "rgba(0,0,0,0)",
          tooltip: {
   
            trigger: 'item',
            show: true,
            enterable: true,
            textStyle: {
   
              fontSize: 20,
              color: '#fff'
            },
            backgroundColor: 'rgba(0,0,0,0.5)',
            formatter: function (item) {
   
              let tipHtml = "";
              //提示内容
              tipHtml = item
              return tipHtml;
            },
          },
          visualMap: {
   
            min: 0,
            max:100,
            text: ['高', '低'],
            realtime: false,
            calculable: true,
            inRange: {
   
              color: ['lightskyblue', 'yellow', 'orangered']
            }
          },
          // 地图图层样式
          geo: [
            {
   
              map: "js",
              aspectScale: 0.9,
              // roam: false, //是否允许缩放
              roam: true,
              zoom: 1, //默认显示级别
              label: {
    show: true },
              emphasis: {
   
                label: {
    show: true },
                textStyle: {
   
                  color: '#444',
                  fontSize: 8
                },
              },
              zlevel: 3,
            },
          ],
          series: [
            // 颜色图层
          {
   
            type: "map",
              coordinateSystem: "geo",
              geoIndex: 0,
              zlevel: 5,
              label: {
   
                show: true,
              },
              map: 'china', // 自定义扩展图表类型
              // normal: {label: {show: true}},
              emphasis: {
   
                label: {
    show: true },
                textStyle: {
   
                  color: '#444',
                  fontSize: 8
                }
              },
              data: this.mapData,
            },
            // 柱形左边数量显示
            {
   
              type: "scatter",
              coordinateSystem: "geo",
              geoIndex: 0,
              zlevel: 5,
              label: {
   
                show: !0,
                position: "left",
                formatter: (params) => this.mapData[params.dataIndex].value,
                padding: [4, 8],
                backgroundColor: "#003F5E", //数字显示框颜色
                borderRadius: 5,
                borderColor: "#67F0EF",
                borderWidth: 1,
                color: "#67F0EF",
              },
              silent: true,
              data: scatterData,
            },
          ],
        } 
      myChart.setOption(option, true);
    },

完整的页面代码，可以直接使用，注意引入

<template>
  <div class="MapEcharts">
    <el-button size="medium" v-if="this.history.length === 0" @click="$router.back()" class="sucessbutton" type="text">
          <SvgIcon icon-name="rollback" class="popoverIcon"></SvgIcon>
          返回
        </el-button>
    <el-button v-if="this.history.length > 0" type="text" class="sucessbutton"
      @click="datas()">
      <SvgIcon icon-name="rollback" class="popoverIcon"></SvgIcon>
      返回上一级</el-button>
    <div id="main" :style="{ height: '100%', width: '100%', }" ref="myEchart"></div>
  </div>
</template>
 
<script>

import * as echarts from 'echarts';
import SvgIcon from '@/components/public/SvgIcon' //图标可以去掉这个
import {
   mixins} from '@/mixins/mixins' //这是其他区域的中心点放在后面了

export default {
   
  name: 'MapData',
  data() {
   
    return {
   
      historyOld:'',
      Show:0,