setOption takes most of the execution time in clone function #17656
Description
Version
5.3.3
Link to Minimal Reproduction
No response
Steps to Reproduce
Create a line chart with a few series and animations turned off which is periodically updated (in my example every 100ms) using setOption function by supplying the entire history of data for the visible period of time:
chart.setOption({
series: dataHistoryForAllSeries.map(dp => ({ data: dp }))
})
Every series has around 100 000 data points
Current Behavior
Recently I created a demo app to check whether echarts would fit my team's use case. In our application we have multiple history graphs with varying time intervals which are first pre-filled with historical data and then updated with varying frequency, sometimes as often as every 100ms. I do it similarly to what examples show (that is, old data is removed, new data is pushed and entire array is supplied to series.data in setOption). When profiling the app, I realized that a big part of setOption's execution time is spent on cloning (function called clone). The rest seems like a small part compared to that. I'd like to know whether data could be passed in another way in which the performance would be hurt less, or whether it's something that could be improved on your side.
Analysing one of the function calls from the screenshot below:
- total
setOptionexecution time: 107.93 ms - approximate time spent in some cloning function: 54.26 ms
Expected Behavior
Reduction of setOption execution time
Environment
- OS: Fedora Linux 35
- Browser: Chrome 103
- Framework: AngularAny additional comments?
No response