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

在使用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)'
      }
    }
  ]