ECharts横向dataZoom滑块未按正确X轴时间值绘制数据

问题核心在于使用dataset+encode绑定数据时，默认的dataZoom会以数据的序列索引作为范围基准，而非x轴的实际时间值。要修复这个问题，只需对dataZoom配置做两处关键调整：

• 明确指定xAxisIndex: 0，让滑块与时间类型的x轴关联
• 设置rangeMode: 'value'，强制滑块基于x轴的实际数值（时间）计算显示范围

修改后的完整代码如下：

<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').getTime(), 7],
  [new Date('2021-01-01').getTime(), 10],
  [new Date('2021-07-01').getTime(), 2],
  [new Date('2022-01-01').getTime(), 9],
  [new Date('2022-07-01').getTime(), 1.5],
  [new Date('2023-01-01').getTime(), 10],
  [new Date('2023-07-01').getTime(), 2],
  [new Date('2024-01-01').getTime(), 8.7],
  [new Date('2024-07-01').getTime(), 1.2],
  [new Date('2025-01-01').getTime(), 7],
];
option = {
    dataset: {
    source: data,
    dimensions: ['timestampCol', 'paramCol']
  },
  xAxis: {type: 'time'},
  yAxis: {type: 'value'},
  dataZoom: {
    type: 'slider',
    filterMode: 'none',
    xAxisIndex: 0, // 关联时间类型的x轴
    rangeMode: 'value' // 基于x轴实际值计算范围
  },
  series: [
    {
      name: 'paramCol',
      type: 'line',
      symbol: 'triangle',
      encode: {x: 'timestampCol', y: 'paramCol'}
    }
  ]
};
option && chart.setOption(option);
</script>
</body>
</html>

额外说明：把new Date转换成时间戳（.getTime()）是为了让ECharts更稳定地识别时间维度，避免部分场景下的解析异常，如果你不想转换，直接保留new Date对象也可以，只要确保xAxis.type是time即可。

内容的提问来源于stack exchange，提问作者kii