echarts大屏柱状图柱子添加背景

image
如上图效果
方法`series: [

  {
    name: '一线配怀1',
    type: 'bar',
    barWidth: '20%',
    z: 10,
    showBackground: true,
    backgroundStyle: {
      color: 'transparent', // 背景透明
      borderColor: '#033d5e', // 外框颜色
      borderWidth: 1, // 边框宽度
      borderRadius: [1, 1, 0, 0], // 圆角和柱子保持一致
      shadowBlur: 10, // 阴影模糊
      shadowColor: 'rgba(0, 232, 253, 0.3)', // 外发光阴影
      shadowOffsetX: 100, // 阴影偏移量
    },
    itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#92FBA3' },
        { offset: 1, color: '#111A308f' }
      ])
    },
    data: props.line1Data
  },
 
  {
    name: '二线配怀1',
    type: 'bar',
    barWidth: '20%',
    z: 10,
    showBackground: true,
    backgroundStyle: {
      color: 'transparent', // 背景透明
      borderColor: '#033d5e', // 外框颜色
      borderWidth: 1, // 边框宽度
      borderRadius: [1, 1, 0, 0], // 圆角和柱子保持一致
      shadowBlur: 10, // 阴影模糊
      shadowColor: 'rgba(0, 232, 253, 0.3)', // 外发光阴影
      shadowOffsetX: 100, // 阴影偏移量
    },
    itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#00E8FD' },
        { offset: 1, color: '#111A308f' }
      ])
    },
    data: props.line2Data
  }
]`

使用showBackground,backgroundStyle方法解决

posted @ 2026-04-21 10:30  香香公主o  阅读(4)  评论(0)    收藏  举报