echarts地图下钻+散点图

一、效果

散点图地图下钻,全国时打点全国,下钻到省级打点省级点。


echarts地图下钻+散点图_第1张图片
全国打点

echarts地图下钻+散点图_第2张图片
下钻省级打点

二、实现

      const _this = this
      this.chart = chart
      // 监听chart点击事件
        chart.on('click', function (params) {
          let provincesName = mapProvinces[params.name]
          let provinceId = mapProvincesCode[params.name]
          // 地图下钻
          if (params.componentType === 'geo') {
            // 掉省的地图 json
            if (provincesName) {
              // 注册地图
              _this.getProvincesJson(params.name).then((res) => {
                window.echarts.registerMap(provincesName, res)
              })
              // 掉省级接口
              _this.getChannelPerson({
                'provinceId': provinceId
              })
              if (window.echarts.getMap(provincesName)) {
              // 判断是否加载地图
                setTimeout(() => {
                  _this.defaultOption.title.text = params.name
                  _this.defaultOption.geo.map = provincesName
                  _this.defaultOption.series[0].symbolSize = 40
                  chart.setOption(_this.defaultOption)
                }, 200)
                _this.isProvince = true
              }
            }
          }
        })

三、遇到的问题

全国和省级打点重合

echarts地图下钻+散点图_第3张图片
全国和省级打点重合,legend重合

原因:下钻后没有清空全国打点的series设置,新旧点重合
解决:下钻掉接口取到数据后重置所有数据
echarts地图下钻+散点图_第4张图片
清空解决

你可能感兴趣的:(echarts地图下钻+散点图)