[Bug] Rendering blocking And Memory leak

[fushengrusi]

Version

5.40-5.4.3

Link to Minimal Reproduction

No

Steps to Reproduce

{
    "tooltip": {
        "trigger": "axis",
        "axisPointer": {
            "type": "none"
        },
        "backgroundColor": "#41425A",
        "borderColor": "#41425A",
        "extraCssText": "box-shadow: 0 1px rgba(86, 86, 86, 0.1);",
        "textStyle": {
            "color": "#B6D5E0",
            "width": "136",
            "height": "48"
        }
    },
    "grid": {
        "top": "5%",
        "left": "4%",
        "right": "4%",
        "bottom": "5%",
        "containLabel": true
    },
    "xAxis": [
        {
            "type": "category",
            "data": [
                "未知边界",
                "未知业务",
                "未知设备"
            ],
            "axisLabel": {
                "color": "#333333",
                "fontSize": 10.478125
            },
            "axisTick": {
                "show": false
            },
            "axisLine": {
                "lineStyle": {
                    "color": "#CECECE"
                }
            }
        }
    ],
    "yAxis": [
        {
            "type": "value",
            "axisLine": {
                "show": false,
                "lineStyle": {
                    "color": "#333333"
                }
            },
            "axisTick": {
                "show": false
            },
            "splitLine": {
                "lineStyle": {
                    "color": "#CECECE"
                }
            }
        }
    ],
    "series": [
        {
            "name": "Direct",
            "type": "bar",
            "barWidth": "30%",
            "data": [
                44,
                44,
                44
            ],
            "itemStyle": {
                "color": {
                    "colorStops": [
                        {
                            "offset": 1,
                            "color": "rgba(217,224,236,0.1)"
                        },
                        {
                            "offset": 0,
                            "color": "rgba(217,224,236,0.8)"
                        }
                    ],
                    "x": 0,
                    "y": 0,
                    "x2": 0,
                    "y2": 1,
                    "type": "linear",
                    "global": false
                }
            }
        },
        {
            "type": "pictorialBar",
            "itemStyle": {
                "color": "#3E65FD"
            },
            "symbolRepeat": "fixed",
            "symbolMargin": 1,
            "symbol": "rect",
            "symbolClip": true,
            "symbolSize": [
                "28%",
                3
            ],
            "symbolPosition": "start",
            "symbolOffset": [
                1,
                -1
            ],
            "symbolBoundingData": 100000,
            "data": [
                {
                    "name": "未知边界",
                    "value": 0
                },
                {
                    "name": "未知业务",
                    "value": 4
                },
                {
                    "name": "未知设备",
                    "value": 1
                }
            ],
            "z": 2,
            "animationEasing": "elasticOut"
        }
    ]
}

Current Behavior

Version 5.40 and above have rendering blocking and memory leaks when using this configuration, which can be reproduced in official examples
Browser:chorme 118.0.5993.117（正式版本） (x86_64)
Os:mac OS Sonoma 14.0

Expected Behavior

Normal rendering

Environment

- OS:mac OS Sonoma 14.0
- Browser:chorme 118.0.5993.117（正式版本） (x86_64)
- Framework:Vue@2.6.11

Any additional comments?

It can be reproduced using the official example, but there is a problem of browser stuck and blocked

[echarts-bot]

@fushengrusi It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

BODY

Version

5.40-5.4.3

Link to Minimal Reproduction

No

Steps to Reproduce

`{
    "tooltip": {
        "trigger": "axis",
        "axisPointer": {
            "type": "none"
        },
        "backgroundColor": "#41425A",
        "borderColor": "#41425A",
        "extraCssText": "box-shadow: 0 1px rgba(86, 86, 86, 0.1);",
        "textStyle": {
            "color": "#B6D5E0",
            "width": "136",
            "height": "48"
        }
    },
    "grid": {
        "top": "5%",
        "left": "4%",
        "right": "4%",
        "bottom": "5%",
        "containLabel": true
    },
    "xAxis": [
        {
            "type": "category",
            "data": [
                "Unknown Boundary",
                "Unknown business",
                "Unknown device"
            ],
            "axisLabel": {
                "color": "#333333",
                "fontSize": 10.478125
            },
            "axisTick": {
                "show": false
            },
            "axisLine": {
                "lineStyle": {
                    "color": "#CECECE"
                }
            }
        }
    ],
    "yAxis": [
        {
            "type": "value",
            "axisLine": {
                "show": false,
                "lineStyle": {
                    "color": "#333333"
                }
            },
            "axisTick": {
                "show": false
            },
            "splitLine": {
                "lineStyle": {
                    "color": "#CECECE"
                }
            }
        }
    ],
    "series": [
        {
            "name": "Direct",
            "type": "bar",
            "barWidth": "30%",
            "data": [
                44,
                44,
                44
            ],
            "itemStyle": {
                "color": {
                    "colorStops": [
                        {
                            "offset": 1,
                            "color": "rgba(217,224,236,0.1)"
                        },
                        {
                            "offset": 0,
                            "color": "rgba(217,224,236,0.8)"
                        }
                    ],
                    "x": 0,
                    "y": 0,
                    "x2": 0,
                    "y2": 1,
                    "type": "linear",
                    "global": false
                }
            }
        },
        {
            "type": "pictorialBar",
            "itemStyle": {
                "color": "#3E65FD"
            },
            "symbolRepeat": "fixed",
            "symbolMargin": 1,
            "symbol": "rect",
            "symbolClip": true,
            "symbolSize": [
                "28%",
                3
            ],
            "symbolPosition": "start",
            "symbolOffset": [
                1,
                -1
            ],
            "symbolBoundingData": 100000,
            "data": [
                {
                    "name": "Unknown Boundary",
                    "value": 0
                },
                {
                    "name": "Unknown business",
                    "value": 4
                },
                {
                    "name": "Unknown device",
                    "value": 1
                }
            ],
            "z": 2,
            "animationEasing": "elasticOut"
        }
    ]
}`

### Current Behavior

Version 5.40 and above have rendering blocking and memory leaks when using this configuration, which can be reproduced in official examples
Browser:chorme 118.0.5993.117 (official version) (x86_64)
Os:mac OS Sonoma 14.0


### Expected Behavior

Normal rendering


### Environment

```markdown
- OS: macOS Sonoma 14.0
- Browser:chorme 118.0.5993.117 (official version) (x86_64)
- Framework:Vue@2.6.11

Any additional comments?

It can be reproduced using the official example, but there is a problem of browser stuck and blocked

[plainheart]

Why did you set a large symbolBoundingData? It's the cause of block.

[fushengrusi]

I need a background column style, why can't I set a large symbol BoundingData? Or how can I achieve non blocking?
Why are some examples also set a large symbolBoundingData, but they do not cause block?
And when I remove it 'series[0]'config, the page crashes directly and cannot be rendered.
I suspect there is an issue with the configuration of 'type:pictorialBar'.

[helgasoft]

agree with @plainheart - large value of symbolBoundingData leads to a nonresponsive page.
Also do not see a reason to use this parameter, chart is fine without it.

Why are some examples also set a large symbolBoundingData, but they do not cause block?

which ones ?

And when I remove it 'series[0]'config, the page crashes directly and cannot be rendered.

does "series[0]" mean the bar series? there is no crash after removing it if symbolBoundingData is not there.

[fushengrusi]

Thanks
I understand the reason you're saying.
about large value of symbolBoundingData leads to a nonresponsive page.Is there a suitable mechanism to address it in the future?

[helgasoft]

Please keep in mind that most software is designed to accept reasonable, realistic inputs.
ECharts has hundreds of interconnected input parameters and it would be unwise to bloat the code with excessive data validation, or safeguards for unrealistic scenarios.

[fushengrusi]

I understand.
However, when unreasonable parameters are not used properly, the resulting problems may cause a lot of trouble.
Can we consider providing corresponding prompts in the document?

[github-actions]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[github-actions]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!