apache / apache/echarts

[Bug] Performance bug with date series (seconds unit step with year change)

Open
#21,128 1 comment 2 reactions 0 assignees View on GitHub
bug waiting-for: author
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

6.0.0

### Link to Minimal Reproduction

[Link](https://echarts.apache.org/examples/en/editor.html?c=line-simple&code=PYBwLglsB2AEC8sDeAoWsBEkwBsCmGAXMmupgM4AWwA7kbGAE4CueANKelngB5gCCOCAHNo9DPgBmYDBzKYwvGcQwAVCAFs8scnkYQ85WZwVKAymACe-eqnldJMMAHU8IysswAjYDgAmxvaYjtBgZhAAXgTEAIwAbCYAvqSJcgrAvpAgtiZY-sLCeuIAhjwQRmlcinwW1tEkQRghYZH1MQDMSSlp3DVWNsR2ZE1OAGLFGhA4luJmwMyMAMZ4ZsXQ5AAKjMAY3aRYGTg-PDnyGFS09EyslenZsXG3GPke9HEALE-SeMVgC_VDM6MQxgYDA05BBQQXD1DAAJUMeDAsAiGQ0gUhGDwGhAlGK5HKEMhmAgixgtQGDWJw2qYA2wAJkBg4lB2RMQWSxM59m56G5qX2PH4ZSMg1ypXK6kWAGsicMLnRiNc8EknhLyAAZCDQAHszAwABaeh2xEkxRwuluXAVVxYKvkArO6o1xS8eBwcq42zAv3q7wArFaKNRFQw7bdHcNoBNYX5fRiuNGtABxYr3WAAdgATE8k3gNcBFr8oGIVJM_H4bE8rCBYZAtAnMHnVOZ-rrGsAAG56SQ4S4qa7QIuKRtcGgQPxgSj0LMfIMjUKudyeDA-fy7B17LiWYWEsVOkUut0ewaRrjqqWy_f2c4h22sVW5PMs7G1xi_f6NrCWWviTvm1gMUjAB6YDMDWTRi2ZJVw32XR9EMegAG0TEBGkf1hIQdVHTA4x9ZC9XQFDqUwLMAAZ4gAWhiLNKPaGJYCzdpCH9ABOFiYhw-QYjIgA6MiyPeMj2neVjWLiYSswzGJ_UI2AAF0gyIuSuHIqiaLohimJY9j_SzLiyB4_jhNYjM4gADizGJzLE94YneOTFLk4jqQwNS4mo2j6MY5i2JY9oDPQIyBPaViYjM1ihLCjNTMcpTYBc4k3IojyNO87S_P9d5AtgYLhPMtj_RiMT_XM0SEmJJziUSzF3M8zSfJ0lj_RyvL2nMiiRNKrMitY2TKvimrGjqtKtN83S4laviQozd4sysjrwv9DNzLi5yVNIlL6vS8aWIzKbjPaCyhPedqyqkjM1uqjbkvUryxqa0qDpCuIevMuJTP9MjTMugb1pI27UvuxrMtY57hP9OIIsh8KoYqyEqshIabzUjNKIo9GGIEwhsYE8H2i-gqofMniyLYxy9URs5nxUAAhYoZUUcgZHnMk-0YcQAGIYlGDMM1p7LH3kNCqgw8QsIIedyEsDQ13ERYICWKs9QwPDigI66AdRzHMdgXGyJxzj4qC6bhIDEyjrMjNSqupGbu1jGKL1g3cf043ctN9pQvm4qsq636EcG-2KLRx2sZdl2Avdtqvfab7woJsrbaCZGzgdmJdf1nHsujz2pNE2GyJ60Lk_sVPhnTzOI5xlrc8OqyodO94PqY1a_s11zK6drOyMmuuQpksyZLiOJ4is0v5HL1SQ517vq7I_b--E77IrsvTzPaLMJ7IKfNvC2fw5xl3zPxwSaKh0Kvq39u7a1mew-do-cbBpes1YyyOj68zZqL7flLv_eD8s48XBm_Ji4kspZR4tfBGlN5w00wKMMEeAizMxwhgNmYIuajF5qMMiABRDcZBuSI1Vr8YoBo0QazICLBQYsVDagJH4SWKtJjQAAGoARWCANY9A44CSlj6RgYBOE4EAioEa91VDzSanZYyZEDToLwNAPwojxF7yBppaRzFsZ5QUegvw5RXT4ACKac0ughY0JVjWWE5AhDMI5oI4owi1GwkkVomRfk5ECX0fOZRqiuHiHcfRbRT89GKPnFITwc4VYvGiZ8axrY6iemGM0cIUR6AxBiHqXksASEoESEAA)

### Steps to Reproduce

1. Create a chart with data with seconds timesteps with a year overlap (see reproduction snippet link)
2. Load the chart / play with the slider.
3.

### Current Behavior

💥 the chart is very laggy even on little data.

### Expected Behavior

The chart loading should be smooth.

### Environment

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

### Any additional comments?

Image

I have run some investigations and I think there are 2 main issues.
The first one lies [here](https://github.com/apache/echarts/blob/d4ce746cd8e8663659cf3063c5b509e0b9d0de40/src/scale/Time.ts#L566). `setMethodName` can be very costly as we can see in the flame graph. My suggestion would be to update this function to take the `unitName` as a parameter and to compute the intervals with something like:
```javascript
function getUnitStep(unitName: TimeUnit): number {
// Only return a step for units with fixed millisecond values.
// 'month' and 'year' have variable lengths and should not be handled here.
const step = ({
'week': ONE_DAY * 7,
'half-year': ONE_YEAR / 2,
'quarter': ONE_DAY * 95,
'half-week': ONE_DAY * 7 / 2,
'day': ONE_DAY,
'half-day': ONE_DAY / 2,
'quarter-day': ONE_DAY / 4,
'hour': ONE_HOUR,
'minute': ONE_MINUTE,
'second': ONE_SECOND,
// 'month' and 'year' have variable lengths and should not be handled here.
'year': ONE_YEAR,
'month': ONE_DAY * 31, // Approximate value for month
'millisecond': 1
})[unitName];

return step;
}

function addTicksInSpan(
interval: number,
minTimestamp: number, maxTimestamp: number,
getMethodName: string,
setMethodName: string,
isDate: boolean,
out: InnerTimeTick[],
unitName: TimeUnit
) {
const step = getUnitStep(unitName);
let dateTime = minTimestamp;
while (dateTime < maxTimestamp && dateTime <= extent[1]) {
out.push({
value: dateTime
});
dateTime += step * interval;
}
out.push({
value: dateTime,
notAdd: true
});
// ......
}
```

Secondly, I am under the feeling that we are iterating a bit too much in this function based on a few console.log experiments but this might be me not understanding the full logic behind this piece of code

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.