渐变条形图，多系列且上方带横线

效果图

相关代码

<template>
  <div class="center_bottom_wrap">
    <div class="centerbar" :class="domClass"></div>
  </div>
</template>
<script>
export default {
  props: {
    barWidth: {
      type: Number,
      default: 14
    },
    domClass: {
      type: String,
      default: 'centerbar'
    }
  },
  computed: {
    hdzcdData () {
      return this.hhkfzlData.HDZCD
    },
    yzlhdcdData () {
      return this.hhkfzlData.YZLHDCD
    },
    cityArr () {
      let arr = []
      this.hhkfzlData.HDZCD.forEach(item => {
        arr.push(item.name)
      })
      return arr
    }
  },
  data () {
    return { hhkfzlData: {} }
  },
  created () {
    this.getData()
  },
  mounted () {
    this.initCharts()
  },
  methods: {
    getData () {
      this.hhkfzlData = {
        HDZCD: [{ name: '2017', value: 182 }, { name: '2018', value: 132 }, { name: '2019', value: 232 }, { name: '2020', value: 322 }, { name: '2021', value: 132 }, { name: '2022', value: 332 }],
        YZLHDCD: [{ name: '2017', value: 182 }, { name: '2018', value: 132 }, { name: '2019', value: 332 }, { name: '2020', value: 422 }, { name: '2021', value: 182 }, { name: '2022', value: 432 }]
      }
    },
    initCharts () {
      let cityArr = this.cityArr
      let barWidth = this.barWidth
      var optionData = {
        item0: {
          data: this.hdzcdData,
          name: '收入',
          freq: '年度',
          axis: []
        },
        item1: {
          data: this.yzlhdcdData,
          name: '人均可支配收入',
          freq: '年度',
          axis: []
        },
        legend: [
          '收入',
          '人均可支配收入'
        ],
        dates: cityArr
      }
      // 初始化option的方法
      function initVisualizer (xValue) {
        return {
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              var res =
                params.name + '<br/>' + params.seriesName + ' : ' + params.value
              return res
            }
          },
          grid: {
            left: '10%',
            top: '12%',
            right: '2%',
            bottom: '15%'
          },
          legend: {
            orient: 'horizontal',
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 30,
            x: '60%',
            textStyle: {
              // 图例文字的样式
              color: '#fff',
              fontSize: 12,
              padding: [2, 0, 0, 2],
              fontFamily: '微软雅黑',
              fontWeight: 'normal'
            },
            data: optionData.legend,
            show: true
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#464849'
              }
            },
            axisTick: {
              show: false
            },
            nameTextStyle: {
              fontSize: 14
            },
            axisLabel: {
              textStyle: {
                color: '#DAF4FF',
                fontSize: 14,
                fontFamily: '微软雅黑',
                fontWeight: 'normal'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: 'dashed',
                color: '#194A78'
              }
            }
          },
          xAxis: {
            type: 'category',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#464849'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#DAF4FF',
                fontSize: 14
              }
            },
            splitLine: {
              show: false
            },
            interval: false,
            data: cityArr
          },
          series: [
            {
              // 指标1
              name: optionData.item0.name,
              type: 'bar',
              z: 1,
              barWidth: barWidth,
              barGap: '30%',
              symbolOffset: [0, -6],
              offset: 0,
              data: optionData.item0.data,
              itemStyle: {
                normal: {
                  color: {
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    type: 'linear',
                    global: false,
                    colorStops: [
                      {
                        offset: 1,
                        color: 'rgba(38,149,237,0.1)'
                      },
                      {
                        offset: 0,
                        color: '#365aa5'
                      }
                    ]
                  },
                  opacity: 0.8
                }
              }
            },
            {
              name: '',
              type: 'pictorialBar',
              symbol: 'rect',
              itemStyle: {
                color: '#365aa5'
              },
              symbolOffset: [-8, -1],
              symbolPosition: 'end',
              symbolSize: [barWidth, 3],
              data: optionData.item0.data
            },
            {
              // 指标2
              type: 'bar',
              z: 2,
              barWidth: barWidth,
              barGap: '20%',
              symbolOffset: [0, 6],
              offset: 20,
              name: optionData.item1.name,
              data: optionData.item1.data,
              itemStyle: {
                normal: {
                  color: {
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    type: 'linear',
                    global: false,
                    colorStops: [
                      {
                        offset: 1,
                        color: 'rgba(237, 194, 100, 0.1)'
                      },
                      {
                        offset: 0,
                        color: 'rgba(237, 194, 100, 1)'
                      }
                    ]
                  },
                  opacity: 0.8
                }
              }
            },
            {
              name: '',
              type: 'pictorialBar',
              symbol: 'rect',
              itemStyle: {
                color: 'rgba(237, 194, 100, 1)'
              },
              symbolOffset: [8, -12],
              symbolPosition: 'end',
              symbolSize: [barWidth, 3],
              data: optionData.item1.data
            }
          ]
        }
      }

      // 首次初始化option
      var chart0 = this.$echarts.init(
        document.getElementsByClassName(this.domClass)[0]
      )
      chart0.setOption(initVisualizer([-21.5, 0, 21.5]))
    }
  }
}
</script>
<style lang="scss" scoped>
.center_bottom_wrap {
  display: flex;
  width: 96%;
  height: 200px;
  margin: auto;
  padding: 0 0 0 20px;
}
.centerbar {
  display: flex;
  width: 100%;
  height: 100%;
}
</style>