Recharts的tickFormatter无法格式化日期时间戳该如何解决

核心原因 #

你遇到的X轴显示纪元起始日期的问题，90%以上是时间戳单位不匹配导致的：Moment.js默认接收毫秒级时间戳（13位数字），如果你的dt字段是后端常见的Unix秒级时间戳（10位数字），直接传入Moment就会被识别为1970年附近的日期，和你描述的现象完全吻合。

修复步骤 #

1. 适配时间戳单位 #

修改你的格式化函数，自动适配秒/毫秒级时间戳：

const formatXAxis = tickFormat => {
    // 10位为秒级时间戳，乘以1000转成毫秒
    const validTimestamp = tickFormat.toString().length === 10 ? tickFormat * 1000 : tickFormat
    return moment(validTimestamp).format('DD/MM/YY');
}

如果格式化后出现固定时区偏差，可修改moment调用逻辑适配时区：

// 用UTC时间格式化
return moment(validTimestamp).utc().format('DD/MM/YY')

2. 优化X轴配置（可选但推荐） #

你当前给X轴设置的type="number"对时间类型数据的适配性较差，建议改成时间类型轴，避免后续出现刻度间距异常的问题：

<XAxis
  dataKey="dt"
  tickFormatter={formatXAxis}
  domain={['dataMin', 'dataMax']}
  type="time"
  scale="time"
/>

3. 异常排查手段 #

如果修改后还是不符合预期，可以在格式化函数中增加日志打印，确认入参是否正确：

const formatXAxis = tickFormat => {
    console.log('X轴刻度入参：', tickFormat)
    const validTimestamp = tickFormat.toString().length === 10 ? tickFormat * 1000 : tickFormat
    return moment(validTimestamp).format('DD/MM/YY');
}

打开控制台即可看到每个刻度传入的实际值，确认是否和你data.list中的dt字段一致即可定位问题。

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