echarts之点击外部区域控制地图高亮显示

本文描述了项目中遇到的一个复杂问题,即如何在外部点击事件中获取省份并根据省份找到对应的dataIndex,使用`dispatchAction`控制地图区域高亮显示的过程,包括取消和高亮操作的代码示例。

 记录一下项目上遇到的比较复杂的问题,方便复习!

这里有三个点...

  1. 外部区域在触发点击事件时需要获取到省份

    这里必须获取到省份名称,如果获取不到省份就会影响下一步获取dataIndex的值(我没有找到怎么获取dataIndex的方法,只能用笨办法去找了)
  2. 用省份获取到对应的dataIndex

    根据chinaMap.getOption().geo[0].regions来获取对应的省份列表,然后遍历这个省份列表获取到对应的下标,这个下标就是dataIndex

  3. 使用dispatchAction事件来控制地图区域高亮

    最后就是用dispatchAction方法来控制地图区域高亮显示

      if (selectedArea.value) {    // 判断当前是否有区域在高亮,如果有就取消当前区域高亮

        chinaMap.dispatchAction({    // 取消高亮

          type: "downplay",

          seriesIndex: 0,

          dataIndex: selectedArea.value,

        });

      }

      chinaMap.dispatchAction({  // 高亮显示

        type: "highlight",

        seriesIndex: 0,

        dataIndex: dataIndex,

      });

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值