Echarts 鼠标hover时柱状图设置背景色

转载于 2025-05-19 13:50:38 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/a1056244734/article/details/125770329

文章标签：

#echarts #前端 #javascript

hover时设置背景色

只需要在tooltip里设置axisPointer即可

tooltip: {
    trigger: 'axis',
    showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
    axisPointer: {
      type: 'shadow',
      shadowStyle: {
        color: 'rgba(74, 211, 164, 0.15)',
        width: '1'
      }
    }
},

设置渐变背景色

tooltip: {
    trigger: 'axis',
    showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
    axisPointer: {
      type: 'shadow',
      shadowStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(0,253,255,0.6)'
          },
          {
            offset: 1,
            color: 'rgba(73,201,229,0)'
          }
        ]),
        width: 'auto'
      }
    }
},

直接设置背景色

设置背景色

series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
]