ECharts中如何修改时间图表的时间轴标签为相对时间格式

可以直接通过ECharts轴配置自带的标签格式化能力实现，无需修改框架源码，具体操作如下：

• 确定相对时间计算基准
  根据业务需求选择基准时间即可：如果要展示距离数据集中最新时间点的间隔，取数据集内最大时间戳为基准；如果要展示距离用户当前访问时间的间隔，取Date.now()为基准。
• 编写时间差转换工具函数
  用于计算两个时间戳的差值，转换为“X天前”“X小时前”这类文本，参考实现：

  const formatRelative = (targetTs, baseTs) => {
    const gap = baseTs - targetTs
    const minUnit = 60 * 1000
    const hourUnit = 60 * minUnit
    const dayUnit = 24 * hourUnit
    if (gap < minUnit) return '刚刚'
    if (gap < hourUnit) return `${Math.floor(gap / minUnit)}分钟前`
    if (gap < dayUnit) return `${Math.floor(gap / hourUnit)}小时前`
    return `${Math.floor(gap / dayUnit)}天前`
  }
  

• 接入轴标签格式化配置
  在时间轴（通常为x轴）的配置项中，通过axisLabel.formatter传入自定义格式化逻辑，每个轴刻度渲染时会自动调用该函数生成标签文本，参考配置：

  // 提前计算基准时间，示例为取数据集最后一个数据点的时间
  const baseTime = dataset[dataset.length - 1].timestamp
  const chartOption = {
    xAxis: {
      type: 'time',
      // 其余原有x轴配置（比如边界、位置等）保持不变
      axisLabel: {
        formatter: (tickValue) => formatRelative(tickValue, baseTime)
      }
    },
    // 其余y轴、series、tooltip等配置和原有渐变折线图配置完全一致
  }
  

配置后如果搭配dataZoom缩放组件使用，轴标签会随缩放范围自动重新计算渲染，不需要额外绑定缩放事件做处理。如果需要更细粒度的时间表述（比如“3周前”“2个月前”），只需要修改上面转换函数里的单位判断逻辑即可。

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