echarts横向柱状图标签靠右对齐显示

需求如图：

柱状图有背景色并且标签右对齐。本来以为echarts自带这些属性，查看了之后并没有找到直接能右对齐的属性，只有添加背景色的属性：`showBackground`，且这个属性是大于等于4.7版本的可以。

下面说一下解决思路：

上图中其实每条柱子只有一条数据，我们现在把它当作两条数据来看，左边一条，右边一条，然后把两条数据重叠在一起，就可以渲染出一条数据的视觉。然后让标签距离右边的柱条一定的距离，就实现右对齐了。两条柱条的数据是一样的，只不过左边的柱条不显示label，只让右边的显示。

比较重要的步骤是第一条数据的`zlevel`设为2，第二条数据的`barGap`设为`-100`

代码如下：

option = {
     color: ['#F95757', '#00CA99', '#9C67E0', '#F7C739', '#4D8EFF'],
     legend: {
         show: false
      },
      grid: {
          top: 20,
          left: '3%',
          right: '15%',
          bottom: '3%',
          containLabel: true
      },
      xAxis: {
          type: 'value',
          max: 'dataMax', // 保证百分比和柱状图宽度对应得上
          axisLine: {
              show: false
          },
          axisTick: {
              show: false
          },
          splitLine: {
              show: false
          },
          axisLabel: {
              show: false
          }
       },
       yAxis: {
           type: 'category',
           inverse: true,
           data: [],
           axisLine: {
              show: false
           },
           axisTick: {
              show: false
           }
       },
       series: [
           {
              name: '',
              type: 'bar',
              barWidth: 30,
              zlevel: 2, // 层级高的显示在上面
              data: []
           },
           {
              name: '',
              type: 'bar',
              barWidth: 30,
              barGap: '-100%', // 两条柱条重叠
              data: [],
              label: {
                show: true,
                color: '#666666',
                position: 'right', // 标签右对齐
                distance: 15,// 标签距离柱条的距离
                formatter: params => {
                  const arr = [`${params.data.realValue}`, `{sep_color||}`, `${params.data.percent}%`]
                  return arr.join('')
                },
                rich: {
                  sep_color: {
                    color: '#E0E0E0',
                    padding: [0, 4]
                  }
                }
              },
              itemStyle: {
                color: '#F2F4F9'
              },
              emphasis: {
                // 防止鼠标放柱状图上时柱子消失
                itemStyle: {
                  color: '#F2F4F9'
                }
              }
            }
          ]
        },

给两条数据赋值：

// 第一条数据
this.option.series[0].data = res.data.left.data

// 求和，计算百分比用
this.regionData = res.data.left.data
this.regionTotal = 0
for (var i = 0; i < this.regionData.length; i++) {
    this.regionTotal += this.regionData[i]
}

// 给第二个柱状图添加数据
this.option.series[1].data = this.regionData.map(item => {
    return {
        realValue: item, // 真实的柱条数据，即标签显示的数据
        value: this.regionTotal, // 所有数据的和，以保证每根柱子第二条柱条宽度相等（方便右对齐），百分比占比宽度正确
        percent: ((item / this.regionTotal) * 100).toFixed(2)
    }
})

// 渲染
this.myChart1 = echarts.init(document.getElementById('regionChart'))
this.option && this.myChart1.setOption(this.option, true)

更新：

别的地方看到利用两个Y轴实现label右对齐

echart 柱状图如何让y轴文字靠左显示，series上文字右对齐显示_p g one的博客-CSDN博客_echarts y轴文字左对齐