echarts icon indicating copy to clipboard operation
echarts copied to clipboard

line3D 动态添加数据坐标轴会闪动且会卡顿

Open jingyuLin1999 opened this issue 3 years ago • 3 comments
trafficstars

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 avatar Aug 20 '22 08:08 jingyuLin1999

@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

  1. Using official examples
  2. 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

echarts-bot[bot] avatar Aug 20 '22 08:08 echarts-bot[bot]

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.

helgasoft avatar Aug 27 '22 19:08 helgasoft

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.

github-actions[bot] avatar Aug 26 '24 21:08 github-actions[bot]

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!

github-actions[bot] avatar Sep 02 '24 21:09 github-actions[bot]