Serious-ChrisLopez opened a new issue #12164: Erroneous Behavior when displaying a line chart with multiple data pushes before updating chart data while zoomed in URL: https://github.com/apache/incubator-echarts/issues/12164 ### Version 4.6.0 ### Reproduction link [https://echarts.apache.org/examples/en/editor.html?c=grid-multiple](https://echarts.apache.org/examples/en/editor.html?c=grid-multiple) ### Steps to reproduce 1) Go to the minimal reproduction link provided. 2) Paste the following code: <pre> function randomData() { now = new Date( now oneDay); var value = Math.random() * 500; return { name: now.toString(), value: [ [now.getFullYear(), now.getMonth() 1, now.getDate()].join('/'), Math.round(value) ] }; } var data = []; var now = new Date(1997, 9, 3); var oneDay = 24 * 3600 * 1000; for (var i = 0; i < 100; i ) { data.push(randomData()); } option = { title: { text: '雨量流量关系图', subtext: '数据来自西安兰特水电测控技术有限公司', left: 'center' }, tooltip: { trigger: 'axis', axisPointer: { animation: false } }, legend: { data: ['流量', '降雨量'], left: 10 }, toolbox: { feature: { dataZoom: { yAxisIndex: 'none' }, restore: {}, saveAsImage: {} } }, axisPointer: { link: {xAxisIndex: 'all'} }, dataZoom: [ { show: true, realtime: true, start: 30, end: 70, xAxisIndex: [0, 1] }, { type: 'inside', realtime: true, start: 30, end: 70, xAxisIndex: [0, 1] } ], grid: [{ left: 50, right: 50, height: '35%' }, { left: 50, right: 50, top: '55%', height: '35%' }], xAxis: [ { type: 'time', boundaryGap: false, axisLine: {onZero: true}, }, { gridIndex: 1, type: 'time', boundaryGap: false, axisLine: {onZero: true}, position: 'bottom' } ], yAxis: [ { type: 'value', boundaryGap: [0, "0%"], }, { gridIndex: 1, type: 'value', boundaryGap: [0, "0%"] } ], series: [ { name: '流量', type: 'line', symbolSize: 8, hoverAnimation: false, data: data }, { name: '降雨量', type: 'line', xAxisIndex: 1, yAxisIndex: 1, symbolSize: 8, hoverAnimation: false, data: data } ] }; setInterval(function () { for (var i = 0; i < 5; i ) { data.shift(); data.push(randomData()); } myChart.setOption({ series: [ { data: data }, { data: data } ] }); }, 1000); </pre> 3) Zoom in at any level ### What is expected? Lines should be rendered smoothly while zoomed in ### What is actually happening? After zooming in at least once, the lines on the left side of the chart appear to zigzag back and forth rather than continuing to form a smooth line. --- I've created a real-time application where I am sending a lot of data quickly. The issue arises when pushing data multiple times to an array before updating the chart at an interval. I do this so that I don't have to update the chart as many times and performance is better. Turning off the animation on the series appears to stop the zigzagging. Customizing the animation with any or all options such as animationDelayUpdate, animationDurationUpdate, etc does not work and the zigzagging keeps happening. <!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE --> <!-- This issue is in English. DO NOT REMOVE -->
---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: [email protected] With regards, Apache Git Services --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
