最近项目中需要使用到echarts,需要实现点击柱状图时,修改当前点击的柱状图背景色,且没有阴影背景的效果 (如下图)

这样的话,需要给eharts添加click点击事件,直接贴代码: 

但是这样点击事件只会添加在柱状图上,点击其他空白部分都不会触发点击事件,但是又会显示tooltip提示,这样用户体验就不好,明明提示都有了,但是背景色又没有改变,就很尴尬,然后就上网百度了一下,发现了一篇解决了该问题的文章: 

https://blog.csdn.net/smk108/article/details/78482154?locationNum=5&fps=1

我的代码如下: 

addClick() { // 给echatrs添加点击事件,改变当前点击柱状图的背景色
      const eChart = echarts.init(this.$refs.dataEchart);
      eChart.getZr().on('click', data => {
        const pointInPixel = [data.offsetX, data.offsetY];
        if (eChart.containPixel('grid', pointInPixel)) {
          const xIndex = eChart.convertFromPixel({ seriesIndex: 0 }, [data.offsetX, data.offsetY])[0];
          // 事件处理代码书写位置
          this.clickItemIndex = xIndex; // this.clickItemIndex用来保存当前点击项的index,用来修改当前点击项的背景色
          const myOption = eChart.getOption();
          eChart.setOption(myOption, true);
        }
      });
    },

这样点击事件就可以完美的解决了,并且没有出现什么问题! 

看代码，我觉得应该是根据当前点击柱状图的位置，来判断其index索引的。具体的原理大家可以去看一下我贴出的链接里面的文章。

那么剩下的就是修改颜色了,上面的代码中有一个变量this.clickItemIndex,用来保存当前点击柱状图的index,这样可以根据index来修改来确定点击的柱状图,然后改变背景色。此时可以调用echarts提供的设置color的方法color：() => {},

series: [{
          type: 'bar',
          name: '营业额',
          stack: '营业额',
          barWidth: 27,
          data: [],
          itemStyle: {
            normal: {
              color: data => {
                let itemColor = '#FFE6D0';
                if (this.clickItemIndex !== '' || this.clickItemIndex === 0) {
                  // 根据点击事件产生的index来判断，设置背景色
                  if (this.clickItemIndex === data.dataIndex) itemColor = '#FF8115';
                } else if (data.name === '今天') {
                  itemColor = '#FF8115'; // 设置'今天'柱状图的的颜色
                }
                return itemColor;
              },
              barBorderRadius: [4, 4, 0, 0],
            },
          },
        }],
      };