vue3+ts+echarts实现点击柱状图高亮或者是改变颜色？

Question

如何实现点击柱状图的时候，点击的柱状出现高亮或者是改变颜色


这是echarts的点击事件

提供个方法或者是思路也可以
主要 是想要 点击当前柱状图的时候和其它柱状图有区别 知道点击是这个柱状图，在点击一次的时候取消

Answer 1

柱状图的点击事件获取点击的柱子的对应参数（如x轴名字，y轴数值等）

myChart.on('click',function(params){
    this.checkName = params.name
}

然后重新加载柱状图

myChart.on('click',function(params){
    this.checkName = params.name;
     myChart.setOption(option);
}

判断选中的名字改变柱子的颜色样式, 配置文件

 series : [
                {
                    type:'bar',
                    barWidth:40,//宽度
                    data:levelsum,
                    itemStyle: {
                           normal: {
                              label:{show:true},
                              color: function (params){
                              //判断选中的名字改变柱子的颜色样式
                                  if(this.checkName  === params.name){
                                      return '#2f4554';
                                  }else {
                                      return '#c23531';
                                  }
                         }
                      }
                    },
                }
            ]

Answer 2

新版本直接设置selectedMode配合select就可以解决

老版本可以通过点击事件获取对应柱子的参数，结合series中itemStyle.color的渲染

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      itemStyle: {
        color: function(params) {
          let key = params.seriesIndex + '-' + params.dataIndex
            //通过返回值的下标一一对应将颜色赋给柱子上
          return key === this.curInt ? '#f00' : '#00f'
        }
      }
    }
  ]
};


myChart.on('click', params => {
  console.log(params)
  let key = params.seriesIndex + '-' + params.dataIndex
  this.curInt = this.curInt === key ? '' : key
  myChart.setOption(myChart.getOption())
});