vue中echarts的点击事件,给当前点击的柱状图修改背景色

最新推荐文章于 2024-07-30 00:26:52 发布

sjb云雨小月

最新推荐文章于 2024-07-30 00:26:52 发布

阅读量1w

点赞数 3

分类专栏： echarts简单使用文章标签： vue echarts 点击事件背景色修改

本文链接：https://blog.csdn.net/weixin_42342975/article/details/84663602

版权

echarts简单使用专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

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

html:

js:

const eChart = echarts.init(this.$refs.dataEchart);

eChart .on('click', data => {点击后的操作});

但是这样点击事件只会添加在柱状图上,点击其他空白部分都不会触发点击事件,但是又会显示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],
            },
          },
        }],
      };