[Bug] DataZoom's miniature misrepresents data in a managed plot (the plot drawn over the slider doesn't match the main plot's data) #17122
Description
Version
5.3.x
Link to Minimal Reproduction
https://codepen.io/sdfsdfsdasd/pen/ExQoyzG
Steps to Reproduce
- Create a simple line plot/chart using Apache Echarts
- Add built-in data scaling mechanism: dataZoom.
- 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, OperaAny 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)?