echarts 柱状图设置灰色阴影的点击事件

故事背景:
因为有时,某个柱子的数据会很少或则为o,那柱子高度显示的颜色就会低,就会不好点击,不方便用户操作

开发需求:
pc端鼠标移到柱子上,就显示阴影,移出柱子阴影就消失.
app端没有移入事件,就通过点击事件处理了

解决方案:
在option配置项中的tooltip添加如下代码

 tooltip: {
     
    trigger: 'axis',
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      // 方法一
      type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
      shadowStyle: {
     
        color: 'rgba(220, 220, 220, 0.2)'
      }

      // 方法二
      type: 'line',
      lineStyle: {
     
        color: 'rgba(140, 150, 160, 0.2)',
        width: 60
      }
    }
  }

若对你有所帮助,请点个赞,若有疑问,请在评论留言