在使用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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐