apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.1k stars 19.6k forks source link

[Bug] Line chart leaks when lttb sampling is used with 10000 points and the points overlap #18562

Open PRGWITHSTYLE opened 1 year ago

PRGWITHSTYLE commented 1 year ago

Version

5.4.2

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=bar-large&code=MYewdgzgLgBAJgQyggwiArmWBeGBGABiKIG4AoUSWRZGXAcwFMxGAnJRgESQQAobUGLAEpyIAA5QAluDowA3mRgxpUADaMAXAqXKVjAB5RtjYAAsErKBAB0AMxCsAtkhsI4cNE5cR-PNJhQwjAA1DAA5DDcyOEANLrKGnbG-AS6AL7xylAgIGoARiAG2op6MHaMSOisWjplygIAWrlOJQn1AJ4AggZSEACSYHCG2nYIahCM7cqZ0zAQCABujF0DLkxt9XriUgaMagBKSDLaAExz6e2XM1kquWrS4pt6UKxS9Eys2uEIvRBx7V-fQACiApFg2M8ylAOuJauEIBY4CAAO7hK4ZW70N5wKEwQpQHKtGAATjSN10TRa2gA2u1SvUYXDvuCIFJhuiyrMygzobD4RA1Oy2Jy9NcYABdW4GHp9PECbQCGzADj0RwdaIIW7KNkaLCjcaTbXzcRCqAAGXBtV5ekRqINEymXONEFNUigXRqCDxOrM9vKhqdYsxum6fzxrrNnsqPvmfpRDsmGIpOrYUkYEFp9LmTPhQpYAK2CvgPBsi3G6C4PGNOoQTjdYHomnCDyg-VFM10ErI6XIdkwwGksiYLHYUCryF4oECwQZGlg-QQkwAahXGHIALJIMw2dhDEBOXjBABUqVIunnKikTnXuBCLBRUQ4vFOBDweFiMAIn7wogvjFgCAXDUNQACEl0YVc1ErchlH7MBBxkMAYBYIxeHZAxZ3aIDxjAiCoMrOg5gwmAAFIYAAZgIOhsFwckthgAB-GAtygHc92RQ8TxgAB2Ig5mUbQcJA8CVzXUIWO3XcEH3LiYFPABWIgYAAWhgU4lNgvRFzE6D1xCXBWPYmTOKPeT1OotTCC05QaigapkKMmwXAMXhv0ktjdyEOBeB0yDxLCYS8N0ytgjCKiiD_TtlEoaAYBVcc1VYDUeDkGkJS02LYHLPTNTSjLdAcVgYF4S8pDkAgSBgcqAB54qEKAqqkEIQiwsoEsYJKUuQGxxHQRFeDmUwLCsWwipcKB7EcCaABVr0YXhwg6ZaOhUjcNxUjwAB0wDMMxNG8TQIH-T9pBvT8xkdYR2iivQcsrTVev6sxeFQqB0OEGwcgAMV2RgfNOYRbuyebQlwQhz2imA7Icuo9A6rrNW0BH1U1Y17onb0YAxzUMnIS4yEmKBBnHVgct4eDENkMy5wAlDGBRAQ5BHNgOE1PxkACEQtKcDoUBGyaiYAeUkJDeBtGVwzhhoeG0B8lRR5K0auF00wzLMthtMpi3l0scZ4C52m7GY_0yM8CFEIA

Steps to Reproduce

  1. Create a line chart where the point continuously overlap and memory will continue to grow when sampling is set to lttb.
  2. The line chart must update all 10,000 points every second.
  3. You must leave the page open for a long period of time a few hours or increase the number of points

Current Behavior

Chrome crashes with out of memory

Expected Behavior

Memory should be Garbage collected correctly

Environment

- OS:Windows
- Browser: Chrome, electron, Edge
- Framework: Angular

Any additional comments?

No response

helgasoft commented 1 year ago

line chart must update all 10,000 points every second

Your code is actually adding points instead of updating (replacing) them, so memory runs out. Try this :

setInterval(function () {
  newdata = generateData(dataCount);
  opt = myChart.getOption();
  opt.xAxis= {data: newdata.categoryData };
  opt.series[0].data= newdata.valueData;
  myChart.setOption(opt, true);  // replace
}, 1000);
PRGWITHSTYLE commented 1 year ago

I've actually tried this configuration and it still leads to memory building albeit more slowly

PRGWITHSTYLE commented 1 year ago

A work around that we found was to simply disable sampling and it works as expect

sjcobb commented 9 months ago

I'll try to create a repro, but +1 to this issue. At scale, using sampling: 'lttb' can crash the browser when there are thousands of series and we also ended up disabling it

JessonLiou commented 4 months ago

I have met the same problem, it looks like echarts' sampling issue.