echarts的图例，自定义格式化显示的数据如何右对齐

Question

如图

右边的数据是我自定义格式化显示出来的，代码如下

legend: {
            show: 'true',
            top: '30%',
            left: '50%',
            orient: 'vertical',
            icon:"circle",
            itemWidth:8,
            itemHeight:8,
            data:this.currentLegend,
            selectedMode: false,
            // 自定义格式化数据
            formatter: name => {
              var index = 0;
              var clientlabels = this.currentLegend;
              var clientcounts = this.currentData;
              clientlabels.forEach(function(value, i) {
                if (value == name) {
                  index = i;
                }
              });
              return name + " " + clientcounts[index].value + '%'
            }
        },

但是我想要实现下面的效果，不知道如何实现

Answer 1

https://blog.csdn.net/GXing00...
可以看看这篇博客

let arr = [  '{a|' + name + '}{b|' + target + '}{c|' + ((target / total) * 100).toFixed(2) + '%];
 
                          return arr.join('\n')
textStyle: {
                          rich: {
                              a: {
                                  verticalAlign: 'right',
                                  fontSize: 12,
                                  align: 'left',
                                  // padding:[0,28,0,0],
                                  width: 70
                              },
                              b: {
                                  fontSize: 12,
                                  align: 'left',
                                  // padding:[0,28,0,0],
                                  width: 50
 
                              },
                              c: {
                                  fontSize: 12,
                                  align: 'left',
                                  width: 50
                              }
                          }
                      },
                  },

Answer 2

formatter: name => {
            let space = `\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000`
            space = space.slice(0, 7 - name.length)
            return `${name}${space}${this.objData[name]}`
          }

可以试试这样

Answer 3

left属性改为right，行不？

https://www.echartsjs.com/exa...

Answer 4

富文本标签 https://echarts.baidu.com/opt...

legend: {
            show: 'true',
            top: '30%',
            left: '50%',
            orient: 'vertical',
            icon:"circle",
            itemWidth:8,
            itemHeight:8,
            data:this.currentLegend,
            selectedMode: false,
            // 自定义格式化数据
            formatter: name => {
              var index = 0;
              var clientlabels = this.currentLegend;
              var clientcounts = this.currentData;
              clientlabels.forEach(function(value, i) {
                if (value == name) {
                  index = i;
                }
              });
              return `{name|${name}}  {value|${clientcounts[index].value}%}`
            },
            textStyle: {
              rich: {
                name: {
                  width: 80
                },
                value: {
                  width: 80,
                  align: 'right'
                }
              }
            }
        },

Answer 5

relVal += '<br/><b>' + params[i].marker + params[i].seriesName + '</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + '<span style="float: right">' + (100 *
                parseFloat(params[i].value) / parseFloat(total)).toFixed(2) + '%' + '</span>'

使用 float: right 即可