echarts 重叠柱状图 + 显示%

记录自己写过的echarts图表（重叠柱状图 + 显示%）

主要是第二个的柱子设置barGap: '-100%', z: -1。barGap是让第二个柱子和第一个柱子重叠（间距变为-100%），z是让第二个柱子在第一个柱子的下层

const seriesData = []
for (let i = 0; i < this.legend.length; i++) {
 const series = {
   name: this.legend[i],
   type: 'bar',
   barMaxWidth: 33,
   barGap: '-100%',
   label: {
     show: true,
     position: 'insideTop',
     color: '#fff'
   },
   data: this.value[i]
 }
 if (i % 2 === 1) {
   series.z = -1
   series.label.position = 'top'
   // 给第二个柱子的上面添加%显示数据
   series.label.formatter = (params) => {
     const rate = this.rate[params.dataIndex] || this.rate[params.dataIndex] === 0 ? this.rate[params.dataIndex] + '%' : ''
     const arr = [
       '{rate|' + rate + '}',
       '{value|' + params.value + '}'
     ]
     return arr.join('\n')
   }
   series.label.rich = {
     rate: {
       padding: [0, 0, 0, 0],
       color: '#4FD8FF'
     },
     value: {
       padding: [0, 0, -25, 0],
       color: '#D7E9EE'
     }
   }
 }
 seriesData.push(series)
}
res.series = seriesData