I would like to use an echarts horizontal dataZoom slider with timeseries data.
The code below (complete example) works fine except for the fact that the miniature chart of the data in the slider is evidently plotted using a sequential index (1, 2, 3, 4, etc.) for the X axis instead of the actual data values (1980, 2021, 2022, 2023, etc.). Hence it's confusing and misleading when actually using the slider to view a section of data, as in the example.
I found and tried this answer (complete example), but it did not change the slider appearance or behaviour.
<html>
<head>
<script type="text/javascript" src="/[email protected]/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
var chartDom = document.getElementById('chart');
var chart = echarts.init(chartDom);
var option;
var data = [
[new Date('1980-01-01'), 7],
[new Date('2021-01-01'), 10],
[new Date('2021-07-01'), 2],
[new Date('2022-01-01'), 9],
[new Date('2022-07-01'), 1.5],
[new Date('2023-01-01'), 10],
[new Date('2023-07-01'), 2],
[new Date('2024-01-01'), 8.7],
[new Date('2024-07-01'), 1.2],
[new Date('2025-01-01'), 7],
];
option = {
dataset: {
source: data,
dimensions: ['timestampCol', 'paramCol']
},
xAxis: {type: 'time'},
yAxis: {type: 'value'},
dataZoom: {
type: 'slider',
filterMode: 'none',
},
series: [
{
name: 'paramCol',
type: 'line',
symbol: 'triangle',
encode: {x: 'timestampCol', y: 'paramCol'}
}
]
};
option && chart.setOption(option);
</script>
</body>
</html>
I would like to use an echarts horizontal dataZoom slider with timeseries data.
The code below (complete example) works fine except for the fact that the miniature chart of the data in the slider is evidently plotted using a sequential index (1, 2, 3, 4, etc.) for the X axis instead of the actual data values (1980, 2021, 2022, 2023, etc.). Hence it's confusing and misleading when actually using the slider to view a section of data, as in the example.
I found and tried this answer (complete example), but it did not change the slider appearance or behaviour.
<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr/npm/[email protected]/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
var chartDom = document.getElementById('chart');
var chart = echarts.init(chartDom);
var option;
var data = [
[new Date('1980-01-01'), 7],
[new Date('2021-01-01'), 10],
[new Date('2021-07-01'), 2],
[new Date('2022-01-01'), 9],
[new Date('2022-07-01'), 1.5],
[new Date('2023-01-01'), 10],
[new Date('2023-07-01'), 2],
[new Date('2024-01-01'), 8.7],
[new Date('2024-07-01'), 1.2],
[new Date('2025-01-01'), 7],
];
option = {
dataset: {
source: data,
dimensions: ['timestampCol', 'paramCol']
},
xAxis: {type: 'time'},
yAxis: {type: 'value'},
dataZoom: {
type: 'slider',
filterMode: 'none',
},
series: [
{
name: 'paramCol',
type: 'line',
symbol: 'triangle',
encode: {x: 'timestampCol', y: 'paramCol'}
}
]
};
option && chart.setOption(option);
</script>
</body>
</html>
1 Answer
Reset to default 1This is the standard behavior of echarts, no matter what kind of
axes are used, the x axis positions in the slider are equidistant;
see how SliderZoomView constructs the shadow
polygon in the source code.
I wouldn't expect the polygon inside the slider to be an accurate representation of the chart data, but if you think this is important, you may add a feature request or bug report on github.
Just as an experiment, to prove the point, one gets an accurate representation of the x positions in the slider if one replaces at line 422:
areaPoints.push([thisCoord, otherCoord]);
linePoints.push([thisCoord, otherCoord]);
thisCoord += step;
lastIsEmpty = isEmpty;
with
const thisAxisIndex = info.thisAxis.index,
thisMinValue = Math.min(...data.getDataExtent(thisAxisIndex)),
thisMaxValue = Math.max(...data.getDataExtent(thisAxisIndex)),
thisValue = data.getValues([thisAxisIndex], index)[0];
thisCoord = Math.round(thisShadowExtent[1] * (thisValue - thisMinValue) / (thisMaxValue - thisMinValue));
areaPoints.push([thisCoord, otherCoord]);
linePoints.push([thisCoord, otherCoord]);
lastIsEmpty = isEmpty;
where the first three lines (const declarations) may be moved outside the
data.each call. The changed version (don't use in production!) is
in this codesandbox.