[Bug] Too many points on a mixed chart of scatter and line would cause canvas not to be cleared correctly

[bbeas]

Version

5.4.3

Link to Minimal Reproduction

https://codesandbox.io/p/sandbox/large-scale-candlestick-forked-mtvc4k?file=%2Findex.js%3A135%2C19

Steps to Reproduce

1. Add a line series and a scatter series on one chart
2. scroll to zoom in and zoom out
3. The line would not be cleared properly on the canvas

Current Behavior

It seems like only the lines would be left on the canvas when zooming in and zoom out. If I change one of the two specific types to another type, e.g., change 'line' to 'candlestick', the problem would not occur.

Expected Behavior

Lines and scatters be rendered properly together

Environment

- OS: macOS 12.7.2 (Apple M2)
- Browser: Version 120.0.6099.234 (Official Build) (arm64)
- Framework: React

Any additional comments?

No response

[helgasoft]

missing Minimal Reproduction - Sandbox not found

[bbeas]

missing Minimal Reproduction - Sandbox not found

https://codesandbox.io/p/sandbox/large-scale-candlestick-forked-mtvc4k?file=%2Findex.js%3A118%2C5 what about this? Just changed its permission to public

[helgasoft]

adding large: true to all three series seems to work ok - Demo Code 📌 please close issue if problem solved.

[bbeas]

It works on this minimal reproduction demo, but not on my own code 😭 Still trying to figure out if there are any other factors affecting the behaviour, such as type="time" or the series of my xAxis data not having fixed time intervals If possible, keep the issue open and I'll update it whenever I have some progress. Thanks.

[Ovilia]

It seems that the demo works even without large: true with @helgasoft 's link. @bbeas Please make sure you are using the latest version. You'd better use ECharts's official link to create the demo. If the problem exists, you need to minify the code and remove all unncessary code to help find what caused this problem.

[bbeas]

It seems that the demo works even without large: true with @helgasoft 's link. @bbeas Please make sure you are using the latest version. You'd better use ECharts's official link to create the demo. If the problem exists, you need to minify the code and remove all unncessary code to help find what caused this problem.

The problem could simply occur if I comment the large: true in @helgasoft 's demo code on my laptop (Macbook Pro M2 2022 with 16GB memory). It happens with both ECharts v5.4.3 and v5.5.0-rc.1. Do you have any ideas about this?

[bbeas]

Fixed the problem by changing type: scatter to type: line and set lineStyle: {width: 0} to hide the line. This could just achieve the expected behaviour without the problem above when zooming in and out.

[AndreyPatseiko]

Hmmm. It's possible that problem comes from the

  tooltip: {
    trigger: 'axis'
  },

If you change trigger type to the 'item', behavior will be normal. But it's not fit to your design....... 🤔