[Bug] Stale renders on data zoom slider change

[nikeshparajuli]

Version

5.4.1

Link to Minimal Reproduction

No response

Steps to Reproduce

1. Drag data zoom slider all the way to the left from right

2. Drag data zoom slider to the right to expand selection

3. Drag back and forth again to see multiple stale rendering

Current Behavior

Creates multiple stale renders

Expected Behavior

Should render only once after data zoom

Environment

- OS: macOS
- Browser: Google Chrome
- Framework: Vue 3

Any additional comments?

All are same curve but rendered multiple times (some go away on hover):

Just curious if anyone has come across this? The steps I used for recreating are for smaller data sets. For larger data sets, you don't have to drag all the way to the left to see this. It happens as soon as you drag the x-axis slider to any position.

[Ovilia]

Please provide a demo for the issue either with Official Editor, CodePen, CodeSandbox or JSFiddle.

[DanielZellner]

I have the same issue, but it only happens on larger datasets in my case (over 20.000 - 30.000 datapoints) It seems like there is a problem with the loading/rendering of the chart after dragging around the slider, setting realtime: false datazoom.slider.realtime slightly improves this behavior, but when the dataset gets bigger the issue still persist.

Version/Enviroment:

• Echarts: 5.4.2
• ngx-echarts: 15.0.3
• browser: edge/chrome

Steps to reproduce:

• create a dataset of over 30.000 entrys
• each entry has values for 2 line-charts and 2 scatter-charts
• create a slider and drag around the chart

Or:

• enter this code into a echarts editor: echarts editor
• drag around with the slider and than disable all the series, some lines and points should be still visiable

let base = +new Date(1968, 9, 3);
let oneDay = 24 * 3600 * 1000;
let date = [];
let data = [Math.random() * 300];
let lineChartData1 = [];
let lineChartData2 = [];
let scatterChartData1 = [];
let scatterChartData2 = [];
for (let i = 1; i < 20000; i++) {
  var now = new Date((base += oneDay));
  date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));

  lineChartData1.push(Math.round((Math.random() - 0.5) * 20));
  lineChartData2.push(Math.round((Math.random() - 0.5) * 20));

  scatterChartData1.push([i, i]);
  scatterChartData2.push([i, i]);
}
option = {
  tooltip: {
    trigger: 'axis',
    position: function (pt) {
      return [pt[0], '10%'];
    }
  },
  legend: {},
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    data: date
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '100%']
  },
  dataZoom: [
    {
      type: 'inside',
      start: 0,
      end: 10
    },
    {
      start: 0,
      end: 10
    }
  ],
  series: [
    {
      name: 'Line Chart 1',
      type: 'line',
      symbol: 'none',
      itemStyle: {
        color: 'rgb(255, 70, 131)',
      },
      data: lineChartData1,
    },
    {
      name: 'Line Chart 2',
      type: 'line',
      symbol: 'none',
      itemStyle: {
        color: 'rgb(70, 131, 255)',
      },
      data: lineChartData2,
    },
    {
      name: 'Scatter Chart 1',
      type: 'scatter',
      symbolSize: 8,
      itemStyle: {
        color: 'rgb(255, 0, 0)',
      },
      data: scatterChartData1,
    },
    {
      name: 'Scatter Chart 2',
      type: 'scatter',
      symbolSize: 8,
      itemStyle: {
        color: 'rgb(0, 255, 0)',
      },
      data: scatterChartData2,
    },
  ],
};

• This should come out when you disable all series:

[DanielZellner]

when the renderer is svg, the issue is gone, but the chart gets so slow that it is not usable anymore

[nikeshparajuli]

@DanielZellner I couldn't get around this issue with the xAxis type being set to category (which is what I had initially). So I changed the xAxis to be of type value and I don't have these issues anymore. The data structure we provide to the series data will now be a 2D array (number[][]) instead of just a single dimensional array (number[]). I've only gone as far as ~10k data points and it seems to be ok handling that. No annoying stale renders.

[DanielZellner]

@nikeshparajuli thank you for your response, but the things you mentioned have I already tried or is already built in. My issue is that my data can go up to 80.000 to 100.000 data points, depending on the date range. Up to 10.000 data points, I also do not get this issue, but as more data loads in as more stale renders are happening. Is there maybe a configuration that could help with this issue, besides using svg as renderer, @Ovilia? All animations are already in my code disabled, realtime is to false as well, I tried throttle, but it did not make any difference, svg is also not helping, because my memory usage goes up to 500mb and everytime you slide around the slider, echarts needs 10 seconds or more to load the data again.

Maybe something to mention is that I use a 2D chart, but like in my first response, my array has for each entry 4 values, so when I talk about 80.000 to 100.000 data points, those are actually 320.000 - 400.000, well I know that it makes it not better

[DanielZellner]

@Ovilia I checked the issue again, since there was a new echarts update. Issue is still not resolved.