[Feature] data sampling in dataZoomSlider

[biggates]

What problem does this feature solve?

Consider the following example (or via echarts examples):

let data = [];
for (let i = 1; i < 20000; i++) {
  data.push([i, Math.sin((i / 5) * Math.PI)]);
}
option = {
  xAxis: {},
  yAxis: {},
  dataZoom: [
    {
      start: 0,
      end: 5
    }
  ],
  series: [
    {
      type: 'line',
      symbol: 'none',
      data: data
    }
  ]
};

As the above image shows, the shadow polyline in dataZoom slider does not reflect the correct "shape" (or "outline") of the actual data.

Update: this problem only occurs at specific dimensions, e.g. when #chart-container is width: 1480px.

The data in shadow is resampled here as this._shadowPolygonPts and this._shadowPolylinePts.

This can be improved by applying sampling like lttb.

What does the proposed API look like?

in option:

{
  dataZoom: {
    dataSampling: '', // default none, can be lttb, average, max, min, sum
  }
}

or just

{
  dataZoom: {
    sampling: '', // default none, can be lttb, average, max, min, sum
  }
}

[echarts-bot[bot]]

This issue is labeled with difficulty: easy. @biggates Would you like to debug it by yourself? This is a quicker way to get your problem fixed. Or you may wait for the community to fix.

Please have a look at How to debug ECharts if you'd like to give a try. 🤓

[biggates]

@Ovilia hello, any chance of PR #18768 gets reviewed by anyone?