如何在ECharts中仅显示有数据点的X轴（时间轴）标签？

方案一：改用类目轴（推荐） #

将X轴类型设为category，直接指定xAxis.data为你的数据点时间，同时强制显示所有标签：

xAxis: {
  type: 'category',
  data: ['2024-01-01', '2024-01-03'], // 与系列数据的X值完全对应
  axisLabel: {
    interval: 0 // 显示所有类目标签
  },
  axisTick: {
    alignWithLabel: true // 刻度线对齐标签
  }
},
series: [{
  data: [
    ['2024-01-01', 100],
    ['2024-01-03', 200]
  ],
  type: 'line'
}]

方案二：保留时间轴类型 #

如果必须用type: 'time'，利用axisLabel.filter过滤仅显示数据点的时间（ECharts 5+支持）：

const dataTimestamps = [
  new Date('2024-01-01').getTime(),
  new Date('2024-01-03').getTime()
];

xAxis: {
  type: 'time',
  axisLabel: {
    filter: (value) => dataTimestamps.includes(value)
  },
  min: dataTimestamps[0],
  max: dataTimestamps[1] // 限制轴范围，减少自动刻度
}

注意事项 #

• 使用类目轴时，系列数据的X值必须和xAxis.data中的值严格匹配，否则标签无法对应。
• 时间轴方案中，确保dataTimestamps和系列数据的X值类型一致（均为时间戳或Date对象）。

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