apache / apache/echarts

[Bug] Line chart causing browser crash(out of memory)

Open
#19,377 6 comments 0 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.4.3

### Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html?code=PYBwLglsB2AEC8skG8CwAoJSCG0IFttIYAuWAM2wBsBnAUwBpZIwq6y1Mskw6APMGQDkgbfjAX4qBj5UDRyoGylIQwzce_MAGUwATzYcKMNRABe7WAEYALLAC-irJYVcewYFUggdYAE4QA5t7ofhbD4IGiEre242P2gAEw47GyQ-AEFgmncNEGMhAGMiOm9gDw15WAAjYABXWOxigHFsNwpqeiYYomwyAG0AXXDE2A1UkIys4QA3akq6UqCQgBlsMroqHXIiwjBeANghZEmqacswy36HWHovOnTYLoGUWCollZIhExMABQAVAAYTUug2Hw2REElKmjGuyoEGgMzaHW6fQS5weT2Wqzen1-ACYAUDspJwZlstDYaV2mBOrckREsD0bNZ0BhyNUcsQ4DCIGAAKI5AAWtTANAAFABKWCcJRS2D8wUAeTKACsugADWUeMAAfQAJMgYTF-JYVX1EHR1UKAHScsDCmLAHKVYHQMAWvw8thOsAAIQ0AEkYsK1QKNTq9bFDSrRUxoJUqFQmJLpVKAO4QGJgPlkACsPx-tKT3D5dB8fMEsGxWaz92lllF1alAHoG7BAAH6gE_tQCGMYAZxMA37aAAqVAA6mgDtjetKc0K5VBwWh_URnoW-hgOXgKDQYWgdl1lG2DAYJvzJwgGXUKjM1nsi50MAAYWDYAAIh1hfgaN5xYmkyk0vM6NAANR_qOSAbquC7-BA1wWusHjctg_LCsKXJ0PgmrYkws58Kh4rwAAfBKQFKBA5CwM-r5dEhKHYhaaIrH0ACEiDVAa5AwnQMTvgRUoUahFoUtgFogJUNB8qR3jkbwlHUc8VA9FuBbStxVF8dRv7eBmsB4QAzLmsAAPywIpvEdAufJETa4rCEInE7tuUq1rutlKE2gAVSoAgAaAHfygCcpnwgAu8cO1kgTAFpfiERmUgJQkidBmwHnkVCPrwwpCHymb4PgJA0KEopyfJsCBdAwXDDQYX8Ww0BqXyGmwNpPx6QZEmaiYhVpCVJlmWKsCWQR9lMo5SBEcKGahSFNA_tADYAGy1fAiA_Dl8lDcV45Kqq5ozuGfBGvOORsLUYoEYtFrLZOa26hhW1gUuK4wIhEnzUodhAA

### Steps to Reproduce

option = {
animation: false, title: {
text: '进出口压力',
textStyle: { fontSize: 14 }
},
tooltip: { trigger: 'axis' },
legend: {},
xAxis: { type: 'category', boundaryGap: false, data: [] },
yAxis: { type: 'value', axisLabel: { formatter: '{value}' } },
series: [
{ label:'11PT01', name: '进口', type: 'line', data: [] },
{ label:'11PT02', name: '出口', type: 'line', data: [] },
]
}

function initEcharts() {
chartObj[`chart_${index}`] = echarts.init(document.getElementById(`chart_${index}`), null, {
width: 500,
height: 255
})
// 往对象里添加数据
chartObj[`chart_${index}`].setOption(option)
}

//Loop call
function setChartData(msg) {
xAxisLen++
option.series.forEach((item_2, index_2) => {
if (msg[item_2.label] != undefined) {
item_2.data.push(msg[item_2.label])
item_2.data.length > 300 ? item_2.data.shift() : ''
}
})

//动态修改x轴数据
option.xAxis.data.push(formatLocalDate('hh:mm:ss'))
option.xAxis.data.length > 300 ? item_1.xAxis.data.shift() : ''
})

if(this.xAxisLen/60 == 0)
this.chartObj[`chart_${index}`].clear()
this.chartObj[`chart_${index}`].setOption(item)
},

1. call initEcharts() to create the echarts
2. Loop call setChartData() to set options
3. when browser run 20 minutes, it will out of memory

### Current Behavior

when browser run 20 minutes, it will out of memory

### Expected Behavior

Memory usage remains stable

### Environment

```markdown
- OS:Windows 11
- Browser:Chrome
- Framework:JS
```

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