[inquiry] The line chart is completely rendered, and the large amount of data leads to a long rendering time.

[dianjiqiang]

Version

5.4.2

Link to Minimal Reproduction

---

Steps to Reproduce

---

Current Behavior

Current situation: Rendering a line chart with 12 million data points takes approximately 19 seconds. Although "rendered" and "finished" callback functions are used to create a loading animation, the time is still long.

Adopted solutions:

1. Separate storage of "X-axis" and "Y-axis" data, following the recommended data organization scheme provided by the official documentation.
2. Disable rendering of other components and wait for the remaining components on the page to finish rendering before rendering the large data table.
3. Use the "canvas" rendering approach for table rendering.
4. Apply "sampling: lttb" to reduce sampling and data points.
5. Implement "datazoom" for zooming functionality and display only 800,000 data points after querying the results (although this might not significantly improve performance since the page itself involves rendering all data).

Expected Behavior

Improve the rendering speed of the first screen

Conjecture:

1. I get 1200W pieces of data, but I only render 100W pieces each time, and other data are filled with fake data of the same value.
2. Use "dataZoom" to control the scrolling area. After scrolling, no zooming is performed, only "datazoom" moves, the moving distance is fixed and each time you move, clear the previous 100W and fill the next 100W for rendering, so reciprocating.

Environment

- OS:windows11
- Browser: chrome
- Framework: Vue3
- Hardware: I7 9750H + 1660Ti + DDR4 2666 16G

Any additional comments?

No response

[SmileLikeYe]

有结果吗