eacharts 饼图 label formatter 自定义样式和数据拼接
series 中的labelformatter 无法使用html 模板 ,当官方定义的{a}:系列名。{b}:数据名。{c}:数据值。{d}:百分比。{@xxx}:数据中名为'xxx'的维度的值,如{@product}表示名为'product'` 的维度的值。{@[n]}:数据中维度n的值,如{@[3]}` 表示维度 3 的值,从 0 开始计数。这些属性无法满足我们对...
·
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%"
}
}
最后就可以展示自己的数据了

如图所示,我想要嵌套图的外圈名字与内圈关联起来,这个方法就起到了作用
DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐

所有评论(0)