echarts pictorialBar实现间隔柱图（能量条效果）

下方代码可直接运行在https://echarts.apache.org/examples/zh/editor.html?c=line-simple

方法一、缺点：不能实现渐变色

option = {
  xAxis: {
    type: 'category'
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      label: {
        show: true,
        position: 'top',
      },
      type: 'pictorialBar',
      symbol: 'rect',
      symbolRepeat: true,
      symbolMargin: '5%',
      symbolSize: [50, 30],
      data: [891, 1220, 660, 1670]
    }
  ]
};

方法二、缺点：会出现显示不全的能量块

option = {
  xAxis: [
    {
      type: 'category',
      data: ["2019","2020","2021","2022"],
    }
  ],
  yAxis: [
    {
      max: 100,
      type: 'value'
    }
  ],
  series: [
    {
      name: '电厂数量',
      label: {
        show: true,
        position: 'top',
        color: '#22D6DD'
      },
      type: 'bar',
      barWidth: 40,
      itemStyle: {
        borderRadius: [3, 3, 0, 0],
        color: {
          type: 'linear',
          x: 0,
          y: 1,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#0CA6AE' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#25DEE5' // 100% 处的颜色
            }
          ]
        }
      },
      data: ['39', '43', '55', '66', '71'],
      z: 1
    },
    {
      name: '电厂容量',
      label: {
        show: true,
        position: 'top',
        color: '#FEEBAA'
      },
      type: 'bar',
      barWidth: 40,
      barGap: '40%',
      itemStyle: {
        borderRadius: [3, 3, 0, 0],
        color: {
          type: 'linear',
          x: 0,
          y: 1,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#8F7D28' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#FCF1C8' // 100% 处的颜色
            }
          ]
        }
      },
      data: ['39', '43', '55', '66', '71'],
      z: 1
    },
    {
      type: 'pictorialBar',
      itemStyle: {
        color: '#ffffff'
      },
      symbolRepeat: 'fixed',
      symbolMargin: 6,
      symbol: 'rect',
      symbolClip: true,
      symbolSize: [50, 4],
      symbolPosition: 'start',
      symbolOffset: [-28, 0],
      data: ['39', '43', '55', '66', '71'],
      z: 2
    },
    {
      type: 'pictorialBar',
      itemStyle: {
        color: '#ffffff'
      },
      symbolRepeat: 'fixed',
      symbolMargin: 4,
      symbol: 'rect',
      symbolClip: true,
      symbolSize: [50, 3],
      symbolPosition: 'start',
      symbolOffset: [28, 0],
      data: ['39', '43', '55', '66', '71'],
      z: 2
    }
  ]
};