eacharts 饼图 label formatter 自定义样式和数据拼接

series 中的label formatter 无法使用html 模板 ，当官方定义的

{a}：系列名。

{b}：数据名。

{c}：数据值。

{d}：百分比。

{@xxx}：数据中名为'xxx'的维度的值，如{@product}表示名为'product'` 的维度的值。

{@[n]}：数据中维度n的值，如{@[3]}` 表示维度 3 的值，从 0 开始计数。

这些属性无法满足我们对于数据展示的需求时候 需要这样做

 series:[
    {
      label:{
        normal:{
         formatter:function(e){
            let data=e.data;
                return  `{a|${data.parentName}}{abg|}\n{hr|}\n{b|${data.name}：}${data.value} \n{per|${data.proportion}%}`                                         
                        },    
        }       
      }
    }
 ]

其中 ${}里面的数据 可以展示我们从后台拿过来的任意数据  a,abg,b 这些是通过rich 富文本属性对其样式进行美化

  rich: {
                            a: {
                                color: '#black',
                                lineHeight: 22,
                                align: 'center'
                            },
                            abg: {
                                backgroundColor: '#74D0E5',
                                width: '100%',
                                align: 'right',
                                height: 22,
                                color:"#353535",
                                borderRadius: [4, 4, 0, 0]
                            },
                            hr: {
                                borderColor: '#aaa',
                                width: '100%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                fontSize: 14,
                                lineHeight: 25,
                                color:"#fff"
                            },
                            per: {
                                color: '#fff',
                                backgroundColor: '#00C0FF',
                                padding: [3, 4,3,5],
                               
                                borderRadius: 2,
                                align:"left",
                                left:"3%"
                                
                                
                            }
                        }

最后就可以展示自己的数据了

如图所示，我想要嵌套图的外圈名字与内圈关联起来，这个方法就起到了作用