echarts地图下钻+散点图

一、效果

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


全国打点

下钻省级打点

二、实现

      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
              }
            }
          }
        })

三、遇到的问题

全国和省级打点重合

全国和省级打点重合,legend重合

原因:下钻后没有清空全国打点的series设置,新旧点重合
解决:下钻掉接口取到数据后重置所有数据
清空解决

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 《麻雀》里的徐碧城,作为军统安插到行动处的一名特工,可谓刷新了影视剧女主白莲花的境界。只会发电报,几乎不会用枪,永...
    餐饭阅读 1,493评论 1 3
  • 学霸然冉是那样的不谙世事,校草苏明昊是那样的英俊潇洒,就是这样的两个毫无关系的人,最后却成为了最有关系的两个人。 ...
    悯荷阅读 504评论 0 0
  • 不多时,爱蜜莉亚夫人就回来了,带了一套连衣纱裙和两张全身照,我接过扔进空间戒指中便跟路易斯告别了爱蜜莉亚夫人,离开...
    考拉凶猛阅读 229评论 0 0