echarts icon indicating copy to clipboard operation
echarts copied to clipboard

`setOption` takes most of the execution time in `clone` function

Open JakubRaban opened this issue 3 years ago • 0 comments

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 setOption execution time: 107.93 ms
  • approximate time spent in some cloning function: 54.26 ms time

Expected Behavior

Reduction of setOption execution time

Environment

- OS: Fedora Linux 35
- Browser: Chrome 103
- Framework: Angular

Any additional comments?

No response

JakubRaban avatar Sep 15 '22 16:09 JakubRaban