1.技术选用和地图区域获取

使用echarts的地图功能

import echarts from 'echarts'

地图区域的选取可借用 DataV.GeoAtlas地理小工具

1.1 首先用左侧勾选工具选出想要的嵌套地图范围

1.2 通过新增列的方式给每个区域增加一个描述性标识

1.3 导出GenJson格式的文件并更改拓展名为json存放到对应的文件目录中

2.可以把地图json数据放到静态资源中也可以放到后端接口返回

这里采用放到静态资源中的方式，需要特别注意：在vue 脚手架3.0中 vue暴露的静态资源要放在public中，才能请求到。

            //这里的路径为public中存放地图资源的地址
      axios.get('./map/' + Id + '.json', {}).then(response => {
        const mapJson = response.data
      })

3.初始化地图和绑定点击事件

3.1 初始化地图

 myChart = echarts.init(document.getElementById(divid))
 registerAndsetOption(myChart, chinaId, chinaName, mapJson, true, that.getMapData, that)
 
 
 function registerAndsetOption(myChart, id, name, mapJson, flag, mapData, that) {
 //注册可用的地图
 echarts.registerMap(name, mapJson)
 //设置配置项
   myChart.setOption({
   //配置悬浮框样式和内容
    tooltip: {
      padding: 0,
      enterable: true, // 鼠标是否可以进入到悬浮框中
      transitionDuration: 1, // 提示框浮层的移动动画过渡时间
      textStyle: {
        color: 'red',
        decoration: 'none'
      },
      //  提示框浮层内容格式器
      formatter: function(params) {
        var tipHtml = ''
        tipHtml = '<div style="width:150px;height:150px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7);border-radius: 5px;">' +
         '数量：' + '<span style="color:#25f4f2;margin:0 6px;">' + params.data.Num + '</span>'
            '</div>' 
        return tipHtml
      }
    },
    series: [
      {
        type: 'map',
        //使用 registerMap注册的地图名称。
        map: name,
        geoIndex: 0,
        aspectScale: 0.75, // 长宽比
        showLegendSymbol: false, // 存在legend时显示
        label: {
          normal: {
          //地图上文本样式
            textStyle: {
              fontSize: 15,
              fontWeight: 'bold',
              color: '#35f6bb'
            },
            show: true
          },
          emphasis: {
            show: false,
            textStyle: {
              color: '#fff'
            }
          }
        },
        // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 `'scale'` 或者 `'move'`。设置成 `true` 为都开启
        roam: true,
        itemStyle: {
          normal: {
            areaColor: '#01143e',
            borderColor: '#05f6fd'
          },
          //鼠标没放上去时候的内部和边界颜色
          emphasis: {
            areaColor: '#2bb74a'
          }
          // 鼠标放上去的颜色
        },
        animation: false,
        data: data
      }
    ]
  })
 }

3.2 绑定点击事件

//所有的鼠标事件包含参数 `params`，这是一个包含点击图形的数据信息的对象
        myChart.on('click', function(param) {
        // 这里的citpMap为Cityname与cityId的映射关系文件
          var cityId = cityMap[param.name]
          if (cityId) {
            // 代表有下级地图
            axios
              .get('/map/' + cityId + '.json', {})
              .then(response => {
                const mapJson = response.data
                  registerAndsetOption(
                  myChart,
                  cityId,
                  param.name,
                  mapJson,
                  true,
                  that.getMapData,
                  that
                )
              })
          }
        })