apache / apache/echarts

[Bug] After setting all the 'symbol' in the line chart, if the amount of line data is large, the graph will freeze.

Open
#19,411 3 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

let base = +new Date(1968, 9, 3); let oneDay = 24 * 3600 * 1000; let date = []; let data = [Math.random() * 300]; for (let i = 1; i < 20000; i++) { var now = new Date((base += oneDay)); date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')); data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1])); } option = { tooltip: { trigger: 'axis', position: function (pt) { return [pt[0], '10%']; } }, title: { left: 'center', text: 'Large Area Chart' }, xAxis: { type: 'category', boundaryGap: false, data: date }, yAxis: { type: 'value', boundaryGap: [0, '100%'] }, series: [ { name: 'Fake Data', type: 'line', symbol: 'emptyCircle', symbolSize:9, showAllSymbol:true, showSymbol:true, itemStyle: { color: 'rgb(255, 70, 131)' }, data: data } ] };

### Steps to Reproduce

let base = +new Date(1968, 9, 3);
let oneDay = 24 * 3600 * 1000;
let date = [];
let data = [Math.random() * 300];
for (let i = 1; i < 20000; i++) {
var now = new Date((base += oneDay));
date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
}
option = {
tooltip: {
trigger: 'axis',
position: function (pt) {
return [pt[0], '10%'];
}
},
title: {
left: 'center',
text: 'Large Area Chart'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: date
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%']
},
series: [
{
name: 'Fake Data',
type: 'line',
symbol: 'emptyCircle',
symbolSize:9,
showAllSymbol:true,
showSymbol:true,
itemStyle: {
color: 'rgb(255, 70, 131)'
},
data: data
}
]
};

### Current Behavior

After using the above configuration, the page will become very laggy. I know that there will be some optimization after setting 'lttb', but in our usage scenario, we need to display the full amount of data, and the 'lttb' setting sometimes skips the extreme Value point, so we can't use it, but even if 'lttb' is turned on, when there are multiple line graphs, there will be lag even if the 'symbol' on each line is rare.

### Expected Behavior

In the big data scenario, this lag problem can be optimized. In our scenario, up to 12 lines will be set, each line has 11,000 pieces of data.

### Environment

```markdown
- OS:
- Browser:
- Framework:
```

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