apache / apache/echarts

[Bug] VerticalAlign middle not working

Open
#20,131 4 comments 0 reactions 0 assignees View on GitHub
bug en pending topic: label topic: treemap
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

5.5

### Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=treemap-simple&code=PYBwLglsB2AEC8sDeAoWsDOBTAThLGAXLANprrLkWxgCeIWxA5GDllgLYCGITANFQoATLmC7Ey1aqilToXDo1hNowIVgCC_QbIBuXADYBXJQEYADANnUAxgAsIBoW2gSd1mddnzFzVeo0ubS89QxNiABZ3WQBfKxD0TwT0HyUVNU0AI2Dk9H1jJQA2aKkYkvQAXRK4kqTrVL8MgCEcr3zw2AAmS3LYe0dnLFdSXsTRigblfywmoPjc9qVu-eT-pxc3XOlx7wU06dnTVq28sKXzHYoyk6rc65Db63vqCpX0Ay5MrANiOuoAM2AOG4YDAuGI_yM0BskBgsAAFABKSgJNhgIw4OAAAyQEA4AHMAD4xWCXaSpQkAJQAogAZACSGgAcgBhakkskUJD_CA4DBgABqZ0JAGY-N1TAA6AAc5g5J2k2BsMCEQoKhPMkoA7FqAKQxLHjGpePD2X7jPH480nTJcGwAa3xOGAUKELOABiB1oVeK4-LSdlBICIAHoQxgRQBaDC0DiZD2Rz344CS1hcIQQaD43T4ADukuVHBDbAMEC40KwkczQiM_Lwhir0H-OC4daMMIxWElGF0-OOCWNWzsWAg-MDxAsPROuYgQjAdgn5inW3jOHUOEp6YgteIAFZl7lDKPhkwbEMwTh-yFdLhIDZDBpS_jhgAiDizoQGLAvo1vep7b1DyfE8z2gC8ry8QEwIAZQgAAvJYIj_LxlU9HBmAAYgAMRwiDrDBAAPMAABUW2gDBAWBZgjBABgcHvbAmF_cYeT5QUzkA5Ij2fZhQPA5DrCgsBYIQ4hlkuVCvXQJhsNwgTZEIkiyIooEOGo2jcAYrAmLueSKCVFU1Q6P4Qm4kDz1wPDZCEkSzGlPTbA9KSZJwrCrKkRTSPLFSqOUGi6K0nTkkHLwQusMzeIsy89JvHA7wfYDiDfD8vx_WJBHuKoYgAbiAA

### Steps to Reproduce

Run the provided link or
below code

```
option = {
series: [
{
type: 'treemap',
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
}
]
}
]
}
],
label: {
formatter: function () {
return `{img|}
{name|RELIANCE}
{firstValue|3,201.80}
{secondValue|0.77%}`
},
rich: {
img: {
backgroundColor: {
image: 'https://s3-symbol-logo.tradingview.com/reliance-industrial-infrastructure.svg',
},
height: 100,
width: 100,
borderRadius: 50,
align: 'center',
verticalAlign: "middle"
},
name: {
align: 'center',
fontSize: 24,
color: '#FFF',
textTransform: 'uppercase'
},
firstValue: {
align: 'center',
fontSize: 20,
color: '#FFF',
textTransform: 'uppercase'
},
secondValue: {
align: 'center',
fontSize: 18,
color: '#FFF',
textTransform: 'uppercase'
},
},
align: 'center',
verticalAlign: "middle"
}
}
]
};
```

### Current Behavior

When there are formatted label, align center and vericalAlign middle not working.

### Expected Behavior

Expected all the formatted label with all element should be aligned center both verically and horizontally.

### Environment

```markdown
- OS:
- Browser:
- Framework:
```

### Any additional comments?

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.