最近项目中需要使用到echarts,需要实现点击柱状图时,修改当前点击的柱状图背景色,且没有阴影背景的效果 (如下图)
这样的话,需要给eharts添加click点击事件,直接贴代码:
但是这样点击事件只会添加在柱状图上,点击其他空白部分都不会触发点击事件,但是又会显示tooltip提示,这样用户体验就不好,明明提示都有了,但是背景色又没有改变,就很尴尬,然后就上网百度了一下,发现了一篇解决了该问题的文章:
/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],},},}],};
