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

一、切换位置 

echarts 地图 visualMap 图例点击事件监听_第1张图片

二、切换监听 

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

你可能感兴趣的:(echarts,前端,javascript)