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

[hassanedelbi]

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
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

- OS: Windows
- Browser: Tried on Edge, Chrome
- Framework:

Any additional comments?

No response

[helgasoft]

duplicate, very old bug since #14502, #19087, #20131. Attempt to fix - PR 905

[hassanedelbi]

duplicate, very old bug since #14502, #19087, #20131. Attempt to fix - PR 905

The PR you mentioned is closed, does that mean It cannot be fixed ?

[egemon]

I was able to fix it with : https://echarts.apache.org/en/option.html#series-treemap.labelLayout

labelLayout(params) {
          return {
            y: params.rect.y + params.rect.height / 2 - params.labelRect.height / 2,
            align: 'center',
          }
        },

I hope it will be helpfull