使用echarts自身数据地图下钻至省

代码直接复制然后导入echarts包即可运行，模拟数据在data里面，代码中有注释。

一、需求及思路

1.1 实现地图下钻

获取全国及省份文件路径

provinces:key = 当前省会名称(注意全国的话要额外标注)
provinces:value = 对应省会路径

provinces: {
        '全国': require("echarts/map/json/china.json"),
        '上海': require("echarts/map/json/province/shanghai.json"),
        '河北': require("echarts/map/json/province/hebei.json")
        ...}

点击省的时候调用registerMap=>myEchart.registerMap('全国', provinces['全国'])
再重新给地图设置option即可实现地图下钻=>this.myChart.setOption(options, true)
注意：重新设置option需要在里面进行配置，registerMap函数的第一个参数要对应在option里面的地图series的map上，详细代码参考下方，这里只描述具体思路。

1.2 追踪点击轨迹(实现点击返回)

右上角轨迹轴，点击轨迹轴可以返回到对应的地图上

这里优化在下面的代码中去掉了原因是可以因各自项目而异 思路是可以做一个缓存，可以把每个省份上的撒点数据存到一个对象中，每次点击这个省的时候先查找这个对象中是否有数据，有的话直接取出，没有的话发请求然后存到对象中，下次点击这个省就可以节约请求资源直接拿数据了(这个对象不会存在本地，刷新页面就会清空)

      // {
      //   name: "全国",
      //   scatterData: [], // 撒点数据
      //   mapData: [], // 面板数据
      //   index: 0, // 0:全国,1:省,2:市场
      // }
guideAxle: []

注意如果点的是当前显示的省区域不用发请求也无需做任何操作

1.3 放大地图后点击旁白区域重置地图大小置中显示

监听空白区域点击事件(echarts提供),然后调用 this.myChart.setOption(options, true)即可实现重置置中

this.myChart.getZr().on('click', params => {
    if (!params.target) {
        // 鼠标点击地图外 还原地图大小
    }
  })

1.4 把数据的指定维度映射到对应的视觉元素上，优化取整

方便阅读，阅读性较强

如 最大值191231 分成 5 段
191231/5=38246.2；取运算结果的第一个值3手动+1；然后拼接一共多少位40000；然后乘以之前的5；返回200000；

// val 最大值
// splitNumber 分成几段
  handlerVisualMapMax(val, splitNumber = 5) {
      val = val / splitNumber + "";
      let newVal = +val[0] + 1 + "";
      while (newVal.length < val.length) {
        newVal += "0"
      }
      return newVal * splitNumber;
    },

1.5 金额格式化组件 > 如:1200000元 =>1‘200万元 100000000元 => 1亿元

// num 金额
// toFixed 保留几位小数
// returnResult 返回的格式 对象or金额or单位
  numFormatUnit(num, toFixed = 2, returnResult = "obj") {
      let m = {
        num: 0,
        unit: ""
      }
      if (!num) {
        m.num = num;
        return returnResult === 'obj' ? m : m[returnResult];
      };
      const moneyUnits = ["元", "万元", "亿元", "万亿"]
      const dividend = 10000;
      let curentNum = Number(num);
      const strNumSize = (tempNum) => {
        const stringNum = tempNum.toString()
        const index = stringNum.indexOf(".")
        let newNum = stringNum;
        if (index != -1) {
          newNum = stringNum.substring(0, index)
        }
        return newNum.length
      }
      //转换数字
      let curentUnit = moneyUnits[0];
      //转换单位
      let i = 0;
      for (; i < 4; i++) {
        curentUnit = moneyUnits[i]
        if (strNumSize(curentNum) < 5) {
          break;
        }
        curentNum = curentNum / dividend
      }
      toFixed = i > 1 ? toFixed : 0;
      m.num = curentNum.toFixed(toFixed).toString()
        .replace(/(^|\s)\d+/g, (m) => m.replace(/(?=(?!\b)(\d{3})+$)/g, "'"));
      m.unit = curentUnit;
      return returnResult === 'obj' ? m : m[returnResult];
    }

由于这个项目是基于旧项目扩展上海团队的看板 所以echarts的版本会比较低

一、完整代码

效果图