echarts
echarts copied to clipboard
line3D 动态添加数据坐标轴会闪动且会卡顿
Version
^5.3.3
Link to Minimal Reproduction
No response
Steps to Reproduce
1、用官方例子 2、动态添加数据
setInterval(() => {
this.options.series[0].data.push([Math.random()*11.3,Math.random()*10.3, Math.random()*15.3])
this.chart.setOption(this.options, true);
}, 10);
Current Behavior
x,y,z坐标轴会闪动
Expected Behavior
原因好像是整个图表重绘了,高频率增加新的点,会导致阻塞。
希望line3d能支持类似于appendData,历史数据不再重绘,仅重绘新增的数据。而不是通过 this.chart.setOption(this.options, true);整个重绘,大大降低了绘制效率。
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
No response
@jingyuLin1999 It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗
TRANSLATED
TITLE
line3D dynamically added data axis will flash
BODY
Version
^5.3.3
Link to Minimal Reproduction
No response
Steps to Reproduce
- Using official examples
- Dynamically add data
setInterval(() => {
this.options.series[0].data.push([Math.random()*11.3,Math.random()*10.3, Math.random()*15.3])
this.chart.setOption(this.options, true);
}, 10);
Current Behavior
The x,y,z axes will flicker
Expected Behavior
Hopefully line3d will support appendData to only update data. instead of passing the whole redraw via this.chart.setOption(this.options, true);
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
No response
True - the axes will flicker. And true - appendData is not officially supported for line3D.
But one can somewhat remedy the problem.
First - by not explicitly redraw the chart with setOption(option, true); - true means redraw/replace.
Second - by setting max values to axes
Third - by decreasing the frequency
(Fourth - upgrade computer to faster one)
Update the example with following code
xAxis3D: { type: 'value', max:12 },
yAxis3D: { type: 'value', max:12 },
zAxis3D: { type: 'value', max:30 },
setInterval(() => {
option.series[0].data.push([Math.random()*11.3,Math.random()*10.3, Math.random()*15.3])
myChart.setOption(option); //, true);
}, 800);
and flicker will disappear when tested on Intel i5 processor.
This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.
This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!