[Bug] DataZoom's miniature misrepresents data in a managed plot (the plot drawn over the slider doesn't match the main plot's data)

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, everytime a 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)?

[Ovilia]

This might be fixed in #17143 . Please wait for this PR to be merged.

[MrCatEsq]

Hello, @MrCatEsq ~ If you mean this “indent”?

Hi, @tyn1998! Thanks for the answer. Yes, I mean vertical indents/paddings from top and bottom of the DataZoom border. Your hotfix partially solves the problem, this code sample prooves that. Now the vertical indents have disappeared, and the amplitude of the graph fluctuations corresponds to its representation on the datazoum.

But we still have problems if the graph partially has no data.

The fix also not working if I don’t prefilled “y” array.