[Bug] VerticalAlign middle not working

[princ09]

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

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[helgasoft]

keep in mind that all spaces and new-lines in formatter count. So instead of

        formatter: function () {
          return `{img|} 
                  {name|RELIANCE} 
                  {firstValue|3,201.80} 
                  {secondValue|0.77%}`
            },

we should write formatter: "{img|}\n{name|RELIANCE}\n{firstValue|3,201.80}\n{secondValue|0.77%}". Also - arbitrary image URLs will not work inside the Editor, probably for security reasons. Demo 📌 please close issue if problem solved.

[princ09]

Hi @helgasoft Thanks for your reply. However, elements are still not vertically aligned in the middle.

Thanks for formatter tip btw.

[helgasoft]

oops, this issue is a duplicate of #19087