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

最新推荐文章于 2024-03-04 14:01:21 发布

原创最新推荐文章于 2024-03-04 14:01:21 发布 · 3.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #经验分享

配置项超多的Echarts 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在Echarts柱状图中设置点击事件以显示灰色阴影，提高低高度柱子的可点击性。在PC端，鼠标悬停时柱子显示阴影，离开后阴影消失。在APP端，由于无悬停事件，通过点击事件来处理阴影效果。提供了解决方案的代码片段，并附带了实现效果的截图。

故事背景:
因为有时,某个柱子的数据会很少或则为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
      }
    }
  }