echarts

Horizontal dataZoom slider does not plot data against the correct X axis values?

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.

Screenshot of the chart with confusing section highlighted

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.net/npm/echarts@5.6.0/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>
Solution

  • This 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.