问题描述:label设置rich之后,文本不能垂直居中
困扰我的效果是这样的:
实际我要得效果是这样的:
之前的尝试:
然而并没有用,在rich里的样式设置verticalAlign仍然是没有用
直到我看到了文档:Documentation - Apache ECharts
重要关注这里:
里面提到了文本块,文本片段,我才恍然大悟
最后的配置:
option = {
series: [
{
type: 'treemap',
label: {
verticalAlign: 'middle',
align: 'center',
position: 'bottom',
width: 200,
height: 74,
offset: [0, -37],
formatter: function (info) {
var name = info.name
var value = info.value
let arr = [
`{title|${name}}`,
`{netFlowIn|累计净流入:${value}}`,
`{increase|今日涨幅:${value}%}`,
];
return arr.join('\n');
},
rich: {
title:{
fontSize: 16,
height: 30,
lineHeight: 30,
fontWeight: 700
},
netFlowIn: {
fontSize: 14,
height: 22,
lineHeight: 22
},
increase: {
fontSize: 14,
height: 22,
lineHeight: 22
}
}
},
data: [
{
name: 'nodeA',
value: 10,
children: [
{
name: 'nodeAa',
value: 4
},
{
name: 'nodeAb',
value: 6
}
]
},
{
name: 'nodeB',
value: 20,
children: [
{
name: 'nodeBa',
value: 20,
children: [
{
name: 'nodeBa1',
value: 20
}
]
}
]
}
]
}
]
};
其中,position设置文本块的位置,width,height设置文本块的尺寸,offset设置文本块的偏移,一起设置,文本块就垂直居中了