在使用echarts时,有时需要给柱状图设置背景,有以下几种情况

1. 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)'
      }
    }
  ]

在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐