Echarts柱状图label如何实现个性化~

最近因为公司项目需展示大量图表，所以用到echarts超多，而且ui总是有自己的想法，为了满足只能自己不断地去探索，要实现效果如图所示：

一般柱状图label不是在左就是在右，而且只有一个；像这种内外兼有且样式不同，少；找了很久没找到，只能回官网看配置项，嘿，还真让我发现了；超简单！

series: [
          {
            data: data,
            type: 'bar',
            barMaxWidth: 20,
            label: {
              show: true,
              color: '#fff',
              position: 'right',
              formatter: (params) => {
                return [
                  `{a|${params.value}}    {b|${params.value / sum === 1 ? '100%' : (params.value / sum * 100).toFixed(2) + '%'}}`
                ]
              },
              rich: {
                a: {
                  lineHeight: 10,
                  padding: [0, 0, 0, -30],
                  color: '#ffffff'
                },
                b: {
                  color: '#333333',
                  padding: [0, 0, 0, 10],
                  height: 35
                }
              }
            }
         ]

首先是在formatter给两个值赋予不同的样式a、b;然后在rich里写不同的样式；最重要的是需要让label一部分在柱状图里一部分在柱状图外，是通过position: 'right’和rich里的每个样式的padding来控制的。a是要展示在柱状图里的内容给一个负的padding这样它就到了柱状条里了！如果大家有更好的实现方式，欢迎留言~