echarts 地图 visualMap 图例点击事件监听

一、切换位置 

二、切换监听 

// 切换事件监听
this.myChart.off('datarangeselected'); // 为了不触发两次
this.myChart.on('datarangeselected',(e) => {
      // visualMap change
});

// 配置如下
visualMap: {
          type: 'piecewise',
          showLabel: true,
          inverse: true,
          pieces: [
            {
              value: 1,
              label: '东部大区',
              color: '#c7efac',
              symbol: 'circle'
            },
            {
              value: 2,
              label: '西部大区',
              color: '#2f9fea',
              symbol: 'circle'
            },
            {
              value: 3,
              label: '南部大区',
              color: '#b3edff',
              symbol: 'circle'
            },
            {
              value: 4,
              label: '北部大区',
              color: '#67ccf4',
              symbol: 'circle'
            },
            {
              value: 5,
              label: '中部大区',
              color: '#96e264',
              symbol: 'circle'
            },
          ],
          textStyle: {
            color: '#666',
            fontSize: 11,
            lineHeight: 11
          },
          textGap: 8,
          itemGap: 8,
          itemSymbol: 'rect',
          itemWidth: 10,
          itemHeight: 10,
          align: 'left',
          left: 10,
          bottom: 10,
          backgroundColor: '#fff',
          borderColor: '#ddd',
          borderWidth: 1,
          padding: [10, 10, 10, 10]
},

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Echarts 地图图例点击时关闭该点,可以通过以下的步骤实现: 1. 在地图的 `series` 中,设置 `selectedMode: 'single'`,表示只能选择一个区域。 2. 在地图的 `series` 中,设置 `selected` 属性,用来记录每个区域是否被选中。 3. 在地图的 `legend` 中,设置 `selectedMode: 'single'`,表示只能选择一个图例。 4. 在地图的 `legend` 中,监听 `selectchanged` 事件,获取到用户选中的图例名称,再通过 `setSelected` 方法,将对应的区域的 `selected` 属性设置为 `false`。 以下是示例代码: ```javascript // 设置地图的 series option.series = [{ type: 'map', map: 'world', selectedMode: 'single', // 只能选择一个区域 selected: { // 记录每个区域是否被选中 'China': true, 'USA': true, 'Russia': true }, // 省略其他配置 }]; // 设置地图的 legend option.legend = { data: ['China', 'USA', 'Russia'], selectedMode: 'single', // 只能选择一个图例 // 监听 selectchanged 事件 selectchanged: function(params) { var name = params.name; var seriesIndex = params.seriesIndex; var selected = params.selected; // 将对应的区域的 selected 属性设置为 false option.series[seriesIndex].selected[name] = false; myChart.setOption(option); } }; ``` 在这个示例中,我们设置了地图的 `series` 中的 `selectedMode` 属性为 `'single'`,并在 `selected` 属性中记录每个区域是否被选中。然后,在地图的 `legend` 中设置了 `selectedMode` 属性为 `'single'`,并监听了 `selectchanged` 事件,在事件处理函数中获取到用户选中的图例名称,再将对应的区域的 `selected` 属性设置为 `false`,最后通过 `setOption` 方法更新地图的配置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值