[Bug] Server Side Rendering - Legend spacing does not increase when legend font size does

[ArturCapraro]

Version

5.3.3

Link to Minimal Reproduction

No response

Steps to Reproduce

Increase the legend font size and try to create an svg with server side rendering.

Current Behavior

When we get the server side rendered image with the default font size, the image show fine:

"legend": {
    "type": "plain",
    "orient": "horizontal",
    "left": 60,
    "bottom": 10,
    "icon": "roundRect",
    "selectedMode": false,
    "itemGap": 20,
    "data": [
        "this is element 1",
        "this is element 2",
        "this is element 3",
        "other elements",
        "other elements",
        "other elements"
    ]
},

But, if we increase the fontsize, the gaps between legent items does not increase, causing elements everlap:

"legend": {
    "type": "plain",
    "orient": "horizontal",
    "left": 60,
    "bottom": 10,
    "icon": "roundRect",
    "selectedMode": false,
    "itemGap": 20,
    "textStyle": { "fontSize": 15 },
    "data": [
        "this is element 1",
        "this is element 2",
        "this is element 3",
        "other elements",
        "other elements",
        "other elements"
    ]
},

The only difference here from the beginning is "textStyle": { "fontSize": 15 },.

Expected Behavior

Expect a correct spacing between elements in legend when fontsize increase avoiding overlap.

Environment

- OS: Ubuntu 20.04.4 LTS
- Browser: Chrome
- Node.js: v18.1.0

Any additional comments?

This only occurs with server side generating. In the front-end with javascript and the same options the charts are generating correctly even with font-size increase.

[davidjr82]

I can confirm this issue is happening.

The font-size is not taken into account when generating SSR svg files following the instructions in docs.

https://echarts.apache.org/handbook/en/how-to/cross-platform/server