apache / apache/echarts

[Bug] TreeMap Label verticalAlign gets broken/Not Working while rich is defined.

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

Description

### Version

5.5.1

### Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=treemap-simple&lang=ts&code=MYewdgzgLgBMBOBTAhlRB1eyAO3EBMBlANQHEBJAW2QHNEYBeGACgEpGA-GAbwCgY44aDACW1OoREAvekwCMABgUBuXv0GRYAI2TAA1jXggArmHwBhEABsQ8RjADkAdwAWItA9XrQm0WDCI8Ogi-FAu9mK0iJIyqgI-wiL-gQASiCI0LrBMkRLSiF7xQrAQAG40lmBoVfYABuoCADxlNDBOIWEMAESKXTAu6ZlQ3b0wAB6UVpDdWVDYAFwA9ItOqwB0TgDMa7Y0iwBMSgqLLV0cDQIwjUjAsO2hLt0ALH0DGVkjCn1j3Zt9AGYiKxWboAEm4On0hhMZksNngAF8-otzpdLo1cogLmiXEh_t18KhkPNMYtsGAaModBBEAA2J4AGhExAAQgB5ABKTgUAGlSDQQABBYWCgByhAAqi4AKISmgiwXykXkQUARQAsiKACIAaichCkKpFLKsLPVxGlAA1losdYtSgB2HUAK1VmwAmgBWBVavRWaWq4iq8hyfYABSegvIloAHNLFYKADLyrWLZCi7BaKDxhWS4icnme8zu8jkLrYy4_LrbT3ltFogCevzr9YE9061ZbrbeQ2bFZRF0aJ3KqJgtUKMCQUGM8DAY8JUGJpJaOomVipyBp9IZ4KzIGQzBalWqUFYCPHvARXgSJSgIH0EHsAG0ALpef62FhWRCwET2OTKKIVzyCoog6jq7B8AI0D3noEBrNgxgQC4zBQZcYDIJQiDzGOMH6OCIjngyFwQA2lBaNYOG1IQ7rqgRREXKUyBWMY2EwOqqAuGs_w2LYzAcWEaxYGYICUGwMAAFQwIoCjsDq0nEWiwAuMgFKIGGgTAIgVQ4fxnFCap-CieJUn7Kwax3gAYiIYwEMwZnqAirCqAiag3jAgLwNAbLYFAIjgPYaE0vAIiIBAOFPhcaFolADZ4DhDhQEgiDUNgDiKfWC7EjAeFwRlaJWMgWiIFYibIA2JhQLp2DIFglDhTAqkNuwDBcNF9ZTjOc7ta2ywwOQMDWTQM4EDAlUwGEIiPip-gwFoxi_iUMBgCAt5Fd-DI5aJ9DCUZlATWIYUTQMMCFcVVhtECF0QFYIT0EZThzp-xjYB5n4rZOKAQOAawVmifXuJdwIwAKE0gGDr2fhRUB3vtn50LAyCToZoljf8_w0lAf2XPgDY4TVdXwTcUBrD2WQwIsMD7DAAC0MAE5h8FnSVHKILcpODOTlP7NjV4Vgi-WXMzVg4T1lzMRkYAJVpVSBOl2N9aUgR-cAzGCrdNBzlNy2rW0th6EkrTtGEk4iMp2NK_AKtqxrUuOJQIT4N-8utgI2AgBA7j-XbDhJJ7-CIC7rsfvA1Aw4EOH_KYtzeywDP1ZB2MCJ1s4wJFrv1g43BiDQAA-CJBxnAi1NwUByLn4Lx_BWVrKR5HWAiDFF5cJdQPsFfcFXaw18pql0Bp8Ay1ACIAKTnknMAvmszogEkzAOAAOmADjObzgv_ZTYT0DSPj4DAFXGIIlBYTUIXKSwhlHyfsDC2VB-wDNejsFvp1FSVQMXZb1sXerkswA7-Anb0BfiFIYbRyrr0uH1RASstb_H3iYGAehECIFeqpGAKVfINlNufEAWhnRs0Wh_OaSBkB6GOvQL-ZtmKNVttjM-LhRYTxzkw5uAhIQGCMKYCw1hbCsLYQITEOEEAoDQJgHAeAiBkCoFENgE8BAC3kf0TmVUYCegUJA1s7ZGFUyUBPRRzcy78Obh-KoMQ2KHH0Zoy4bdjFF1MVAcxOE5C0n0bzfmFxXICBfBlO81g_ILB4BcEOYc0DwEjtHPyAVmBJA_DhJqidWzuVyhEMAH5u5EjiPWEQ8DmAAEJcq1zIhRKw7AU5gCyWicpY5saNHwCIUo0FYrfm6NonCmwFBIEoIBepEBsCFTxjxRAYxAJDLGDTepxNvbzFACxSgFTnRIT8v8BsNMfAnhmdpMJgEJaaxpu4FK4Uh6BC7EXRoeSaZ00IHeWahBinWFpjTUczc6kNJys0xA3QHE009jIZxax9iei6aM8AUAaZOBUThEp-BAKzL4TAAAxPsfAmwHRPBjMoM4Si0TgkKXXEpXi2FDnqaUZ5MAlHnMuTAa5sEYCJhAKDS5ZKM6vNJdi9EOccqDxmDDbA4VlhsxUlbeCOBdADB2PAPY2lFiYggIsGwAoEIUgAPwAH1SiqoYIcfYTwFD7H2LSPozFhhdFxTcvQRT65WCRO8hsLSuhtLUcC5R7xVFApSoBPBBDbg00BKo9ZyAkiYopsy12xKGlkopRcq55qYDmBUmpGAA8h6PNDa2Vltr7XfN-WxOQaxQzuu6VigRlwzWwTWL3NSyatmjwpYsElaarj1ojdjC8aJCWuT5rwb8sBgAziQFUHyUS5xME8t5Xy3tVBRzADHAKL0FyIA5CjSgNKHziTQiHL8P4gJMFAn-RoMBNiAREOBRJlx3K7VEuQMwwz7ACS4jxEAfF70GREmJdgUlcpM20jQMIq80RfqfJeyg16A5jCnkxFish2L6Ufc-_SwGTLSSUHJaSWTO28EoA2eNtUSaYyHd7Zgfb4ADqgAR8Aq9eCY2vWEyDzBp2zrnOu9Q87UCLuXauuCbAslYZw1bWuP5yNgCI_2rZQnV4C10Sh5QQA&renderer=svg

### Steps to Reproduce

1. Go To [Minimal Reproduction Link](https://echarts.apache.org/examples/en/editor.html?c=treemap-simple&lang=ts&code=MYewdgzgLgBMBOBTAhlRB1eyAO3EBMBlANQHEBJAW2QHNEYBeGACgEpGA-GAbwCgY44aDACW1OoREAvekwCMABgUBuXv0GRYAI2TAA1jXggArmHwBhEABsQ8RjADkAdwAWItA9XrQm0WDCI8Ogi-FAu9mK0iJIyqgI-wiL-gQASiCI0LrBMkRLSiF7xQrAQAG40lmBoVfYABuoCADxlNDBOIWEMAESKXTAu6ZlQ3b0wAB6UVpDdWVDYAFwA9ItOqwB0TgDMa7Y0iwBMSgqLLV0cDQIwjUjAsO2hLt0ALH0DGVkjCn1j3Zt9AGYiKxWboAEm4On0hhMZksNngAF8-otzpdLo1cogLmiXEh_t18KhkPNMYtsGAaModBBEAA2J4AGhExAAQgB5ABKTgUAGlSDQQABBYWCgByhAAqi4AKISmgiwXykXkQUARQAsiKACIAaichCkKpFLKsLPVxGlAA1losdYtSgB2HUAK1VmwAmgBWBVavRWaWq4iq8hyfYABSegvIloAHNLFYKADLyrWLZCi7BaKDxhWS4icnme8zu8jkLrYy4_LrbT3ltFogCevzr9YE9061ZbrbeQ2bFZRF0aJ3KqJgtUKMCQUGM8DAY8JUGJpJaOomVipyBp9IZ4KzIGQzBalWqUFYCPHvARXgSJSgIH0EHsAG0ALpef62FhWRCwET2OTKKIVzyCoog6jq7B8AI0D3noEBrNgxgQC4zBQZcYDIJQiDzGOMH6OCIjngyFwQA2lBaNYOG1IQ7rqgRREXKUyBWMY2EwOqqAuGs_w2LYzAcWEaxYGYICUGwMAAFQwIoCjsDq0nEWiwAuMgFKIGGgTAIgVQ4fxnFCap-CieJUn7Kwax3gAYiIYwEMwZnqAirCqAiag3jAgLwNAbLYFAIjgPYaE0vAIiIBAOFPhcaFolADZ4DhDhQEgiDUNgDiKfWC7EjAeFwRlaJWMgWiIFYibIA2JhQLp2DIFglDhTAqkNuwDBcNF9ZTjOc7ta2ywwOQMDWTQM4EDAlUwGEIiPip-gwFoxi_iUMBgCAt5Fd-DI5aJ9DCUZlATWIYUTQMMCFcVVhtECF0QFYIT0EZThzp-xjYB5n4rZOKAQOAawVmifXuJdwIwAKE0gGDr2fhRUB3vtn50LAyCToZoljf8_w0lAf2XPgDY4TVdXwTcUBrD2WQwIsMD7DAAC0MAE5h8FnSVHKILcpODOTlP7NjV4Vgi-WXMzVg4T1lzMRkYAJVpVSBOl2N9aUgR-cAzGCrdNBzlNy2rW0th6EkrTtGEk4iMp2NK_AKtqxrUuOJQIT4N-8utgI2AgBA7j-XbDhJJ7-CIC7rsfvA1Aw4EOH_KYtzeywDP1ZB2MCJ1s4wJFrv1g43BiDQAA-CJBxnAi1NwUByLn4Lx_BWVrKR5HWAiDFF5cJdQPsFfcFXaw18pql0Bp8Ay1ACIAKTnknMAvmszogEkzAOAAOmADjObzgv_ZTYT0DSPj4DAFXGIIlBYTUIXKSwhlHyfsDC2VB-wDNejsFvp1FSVQMXZb1sXerkswA7-Anb0BfiFIYbRyrr0uH1RASstb_H3iYGAehECIFeqpGAKVfINlNufEAWhnRs0Wh_OaSBkB6GOvQL-ZtmKNVttjM-LhRYTxzkw5uAhIQGCMKYCw1hbCsLYQITEOEEAoDQJgHAeAiBkCoFENgE8BAC3kf0TmVUYCegUJA1s7ZGFUyUBPRRzcy78Obh-KoMQ2KHH0Zoy4bdjFF1MVAcxOE5C0n0bzfmFxXICBfBlO81g_ILB4BcEOYc0DwEjtHPyAVmBJA_DhJqidWzuVyhEMAH5u5EjiPWEQ8DmAAEJcq1zIhRKw7AU5gCyWicpY5saNHwCIUo0FYrfm6NonCmwFBIEoIBepEBsCFTxjxRAYxAJDLGDTepxNvbzFACxSgFTnRIT8v8BsNMfAnhmdpMJgEJaaxpu4FK4Uh6BC7EXRoeSaZ00IHeWahBinWFpjTUczc6kNJys0xA3QHE009jIZxax9iei6aM8AUAaZOBUThEp-BAKzL4TAAAxPsfAmwHRPBjMoM4Si0TgkKXXEpXi2FDnqaUZ5MAlHnMuTAa5sEYCJhAKDS5ZKM6vNJdi9EOccqDxmDDbA4VlhsxUlbeCOBdADB2PAPY2lFiYggIsGwAoEIUgAPwAH1SiqoYIcfYTwFD7H2LSPozFhhdFxTcvQRT65WCRO8hsLSuhtLUcC5R7xVFApSoBPBBDbg00BKo9ZyAkiYopsy12xKGlkopRcq55qYDmBUmpGAA8h6PNDa2Vltr7XfN-WxOQaxQzuu6VigRlwzWwTWL3NSyatmjwpYsElaarj1ojdjC8aJCWuT5rwb8sBgAziQFUHyUS5xME8t5Xy3tVBRzADHAKL0FyIA5CjSgNKHziTQiHL8P4gJMFAn-RoMBNiAREOBRJlx3K7VEuQMwwz7ACS4jxEAfF70GREmJdgUlcpM20jQMIq80RfqfJeyg16A5jCnkxFish2L6Ufc-_SwGTLSSUHJaSWTO28EoA2eNtUSaYyHd7Zgfb4ADqgAR8Aq9eCY2vWEyDzBp2zrnOu9Q87UCLuXauuCbAslYZw1bWuP5yNgCI_2rZQnV4C10Sh5QQA&renderer=svg)
2. Read Comments Line 43, 44, 60, 61.
-> The problem is that label.verticalAlign does not work when you add the rich object, the second you comment the rich object, the label will vertical Align middle the right way, even if you keep an empty rich object it will break the vertical align. I added a hack which is unstable in labelLayout to manaullay add y or dy to the label.

### Current Behavior

label.verticalAlign does not work when you add the rich object.
The second you comment the rich object, the label will vertical Align middle the right way.

### Expected Behavior

verticalAlign = "middle" should work when you add the rich object in label.

### Environment

```markdown
- OS: Windows
- Browser: Tried on Edge, Chrome
- 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.