Echarts ring chart legend content + data + line break

Since the data returned by legen.formatter does not support line breaks directly, only /n can be used for line breaks. However, the content after using \n can’t be well aligned, and it bothered me for a long time at the beginning. After all, the UI map has been finalized and I can only bite the bullet.

Tell me about my method:

1. Use formatter to get the desired data first and then use \n to wrap

   formatter: function (name) {
        var target;
        for (var j = 0; j < legenddata.length; j++) {
            if (legenddata[j].name === name) {
            target = legenddata[j].value
            }
        }
        return "{a|"+[name]+"}"+'\n'+"{b|"+'总金额'+[target]+"}"
    },

2. Use rich to control after line break

textStyle:{
              rich:{
                  a:{
                      align:'center',
                      color:'#222222',
                      padding:[25,0,10,0],//主要是通过padding来控制位置
                      fontSize:14,
                      fontWeight:400
                  },
                  // 控制
                  b:{
                      align:'center',
                      color:'#999999',
                      position:'absolute',
                      padding:[0,0,0,-40],//主要是通过padding来控制位置
                      fontSize:12,
                      fontWeight:400
                  }
              }
       }

Finally, post a sample code for everyone

var legenddata = [
    {value: 1048, name: '搜索引擎'},
    {value: 735, name: '直接访问'},
    {value: 580, name: '邮件营销'},
    {value: 484, name: '联盟广告'},
    {value: 300, name: '视频广告'}
    ]
option = {
    tooltip: {
        trigger: 'item',
        formatter: '{b}\n{c}元({d}%)'
    },
    legend: {
    	  top: '1%',
          left: '1%', 
          orient: 'vertical', 
        formatter: function (name) {
            var target;
            for (var j = 0; j < legenddata.length; j++) {
                if (legenddata[j].name === name) {
                target = legenddata[j].value
                }
            }
            return "{a|"+[name]+"}"+'\n'+"{b|"+'总金额'+[target]+"}"
        },
        textStyle:{
              rich:{
                  a:{
                      align:'center',
                      color:'#222222',
                      padding:[25,0,10,0],
                      fontSize:14,
                      fontWeight:400
                  },
                  b:{
                      align:'center',
                      color:'#999999',
                      position:'absolute',
                      padding:[0,0,0,-40],
                      fontSize:12,
                      fontWeight:400
                  }
              }
       }
    },
    series: [
        {
            type: 'pie',
            radius: ['40%', '20%'],
            center: ['50%', '40%'],
            labelLine: {
                length: 100,
            },
            label: {
                formatter: '{d}%',
                borderWidth: 1,
                borderRadius: 4,
                rich: {
                    a: {
                        color: '#6E7079',
                        lineHeight: 22,
                        align: 'center'
                    },
                    hr: {
                        borderColor: '#8C8D8E',
                        width: '100%',
                        borderWidth: 1,
                        height: 0
                    },
                    b: {
                        color: '#4C5058',
                        fontSize: 14,
                        fontWeight: 'bold',
                        lineHeight: 33
                    },
                    per: {
                        color: '#fff',
                        backgroundColor: '#4C5058',
                        padding: [3, 4],
                        borderRadius: 4
                    }
                }
            },
            data: legenddata
        }
    ]
};