如何为Apache ECharts的X轴设置30秒时间间隔？

要修改时间轴的刻度间隔，直接针对xAxis的axisLabel.interval和splitLine.interval设置对应毫秒数即可——ECharts的time类型轴会将数值解析为毫秒级时间戳，以此计算刻度位置。

修改后的代码 #

// 定义时间间隔（30秒=30*1000毫秒，后续改15秒用15*1000，5秒用5*1000）
const timeInterval: number = 30 * 1000;

const option = {
  title: {
    text: 'Dynamic Data & Time Axis'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false
    }
  },
  xAxis: {
    type: 'time',
    position: 'bottom',
    min: minTime,
    max: currentTime,

    splitLine: {
      show: true,
      interval: timeInterval, // 分割线间隔设为指定毫秒数
    },
    axisLabel: {
      interval: timeInterval, // 标签间隔设为指定毫秒数
      formatter: function (value: any) {
        const date = new Date(value);
        const hours = date.getHours().toString().padStart(2, '0');
        const minutes = date.getMinutes().toString().padStart(2, '0');
        const seconds = date.getSeconds().toString().padStart(2, '0');
        return `${hours}:${minutes}:${seconds}`;
      },
    },
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '20%'],
    interval: 100,
    splitLine: {
      show: true,
    },
  },
  series: [
    {
      name: 'Data Name Placeholder',
      type: 'line',
      showSymbol: false,
      data: valueTime,
      itemStyle: {
        color: '#FF0000'
      },
    }
  ]
};

关键说明 #

• timeInterval变量统一控制间隔，后续切换15秒/5秒只需修改这个变量的数值
• 同时设置axisLabel.interval和splitLine.interval，保证刻度标签和分割线的间隔完全对齐
• 由于x轴是time类型，ECharts会自动基于毫秒数计算刻度位置，无需额外处理时间格式转换

内容的提问来源于stack exchange，提问作者tan shi yu