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%"
                                
                                
                            }
                        }

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

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

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐