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

笋笋~

已于 2023-09-21 10:31:12 修改

阅读量1.3k

点赞数

文章标签： echarts 前端 javascript

于 2023-09-21 10:30:22 首次发布

本文链接：https://blog.youkuaiyun.com/qq_35699198/article/details/133126555

版权

一、切换位置

二、切换监听

// 切换事件监听
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]
},