vue中使用Echarts map图实现下钻至县级的思路详解

initEcharts("china");
      function initEcharts(map) {
        let option = {
          geo: {
            map: map,
            roam: false,
            scaleLimit: {
              min: 1.2,
              max: 3
            },
            zoom: 1.2,
            //图形上的文本标签，可用于说明图形的一些数据信息
            label: {
              normal: {
                show: true,
                fontSize: "10",
                color: "rgba(0,0,0,0.7)"
              }
            },
            //地图区域的多边形 图形样式，有 normal 和 emphasis 两个状态
            itemStyle: {
              //normal 是图形在默认状态下的样式；
              normal: {
                borderColor: "rgba(0, 0, 0, 0.2)"
              },
              //emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
              emphasis: {
                areaColor: "#F3B329",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          },
          series: [
            {
              name: "信息量",
              type: "map",
              //这里是'china',及因为js中注册的名字，如果是上海市，则该出需pName 指的是'shanghai'
              mapType: map,
              geoIndex: 0
              // data: dataList
            }
          ]
        };
        myChart.setOption(option);
      }

// 点击触发
      myChart.on("click", param => {
        if (param.name in provinces) {
          // 处理省模块
          let names = param.name;
          for (let key in provinces) {
            if (names == key) {
              showProvince(provinces[key], key);
              break;
            }
          }
        } else if (param.name in cityMap) {
          // 处理市模块
          let names = param.name;
          for (let key in cityMap) {
            if (names == key) {
              showCitys(cityMap[key], key);
              break;
            }
          }
        }
      });

//展示对应的省
      function showProvince(eName,param) {
        console.log(eName, param)
        $.getJSON(`/map/province/${eName}.json`, data=>{
          that.$echarts.registerMap(param, data);
          alert("省")
          initEcharts(param);
        })
      }
      //展示对应市
      function showCitys(cName, param) {
        console.log(cName, param)
        // 显示县级地图
        $.getJSON(`/map/city/${cName}.json`, data=>{
          that.$echarts.registerMap(param, data);
          alert("县")
          initEcharts(param);
        })
      }