Version

5.3.x

Link to Minimal Reproduction

https://codepen.io/sdfsdfsdasd/pen/ExQoyzG

Steps to Reproduce

1. Create a simple line plot/chart using Apache Echarts
2. Add built-in data scaling mechanism: dataZoom.
3. Config and initialization script may be pasted to Echarts online editor . Or you can use CodePen link presented above.

let x = [];
let y = [];
let scaled = [];
/*y = [
  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 300, 300, 
  10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 0, 0, 0, 0, 0, 0
];*/
for (let i = 1; i < 300; i++) {
  x.push(i);
  element = Math.random() * 40 + 50;
  y.push(element);
  scaled.push(element * 6 - 250);
}
option = {
  xAxis: {
    data: x
  },
  yAxis: {
    min: 0,
    max: 300
  },
  dataZoom: [
    {
      start: 50,
      end: 58.5
    }
  ],
  series: [
    {
      name: 'Fake Data',
      type: 'line',
      symbol: 'none',
      data: y
    },
    {
      name: 'Simulated Scaling',
      type: 'line',
      symbol: 'none',
      lineStyle: {
        opacity: 0.3
      },
      data: scaled
    }
  ]
};

Current Behavior

DataZoom component reaches its main goal, but there is a question to scaled data representation, made by dataZoom. By default, dataZoom doesn't take into account the chart scale limits ticks or/and the minimum and maximum allowable values ( range of a function , represented by the plot). Instead,the thumbnail of the chart is drawn on the specific value range passed to the plot in series section.In addition, everytimea small indent is added from the minimum and maximum values ​​to the borders of the graphic element.

Expected Behavior

As a result, the representation of the visualised data looks inconsistent with reality: null is not null, max is not max (because they don't match the lower and higher bounds of the coordinate area of ​​the thumbnail plot, respectively), the amplitude of the chart fluctuations does not correspond to the scale of real data fluctuations:

As you can see, the magnitude of the fluctuations of the graph, drawn by dataZoom doesn't correspond rather to the main data, but to some kind of artificial transformation of them (light green graph). Then try to comment line 14 and uncomment lines from 6 to 9 (on CodePen). At the start of the plot you'll see main (blue) graph touching y zero line, but not on the thumbnail.

Environment

- OS: Windows 8.1, Windows 10, MacOS X
- Browser: Chrome, Safari, Opera

Any additional comments?

I didn't find any params for dataZoom that make them to look like expected. My question on StackOverFlow was left unanswered , a feature request posted earlier stays unconfirmed so I made this bug report.

Is there a way (documented or undocumented) to remove the indents and force the plot to use the minimum and maximum values ​​allowed for the yAxis ticks? Some options like dataZoom.slider.removeGaps: true | false and dataZoom.slider.range (values like "asInData" (current behavior), "asInYaxis" (my case), etc)?