如何将JSON数据传入React组件的ApexChart时间线并正常渲染日期区间

1. 重复执行JSON.parse导致图表完全不显示：通过import直接引入的JSON文件，会被React的构建工具（Vite/Webpack等）自动解析为原生JS对象，对已解析的对象再次执行JSON.parse会抛出语法错误，导致图表渲染中断，该操作直接删除即可。
2. 日期区间无法渲染的核心原因：ApexCharts时间线（rangeBar类型）要求每个数据项的y字段必须为包含两个时间值的数组，仅支持毫秒级Unix时间戳（数字类型）或原生Date对象两种格式。JSON本身不支持存储Date对象，如果你在JSON中写入的是日期字符串、秒级时间戳或者格式不符合要求的数值，都会导致组件无法识别时间区间。

• 第一步：调整data.json的存储格式，优先将y字段存储为毫秒级Unix时间戳（数字类型，不要加引号），参考JSON结构：

// data.json 示例
[
  {
    "name": "迭代1",
    "data": [
      {
        "x": "需求开发",
        "y": [1696108800000, 1696713600000]
      },
      {
        "x": "测试验收",
        "y": [1696713600000, 1697145600000]
      }
    ]
  }
]

• 第二步：如果需要在JSON中存储日期字符串，导入后需要做格式转换，参考转换代码：

import rawSeries from './data.json'

// 处理JSON数据中的日期字段
const processedSeries = rawSeries.map(seriesItem => ({
  ...seriesItem,
  data: seriesItem.data.map(item => ({
    ...item,
    // 将字符串日期转为Date对象，也可以转成毫秒时间戳
    y: [new Date(item.y[0]), new Date(item.y[1])]
  }))
}))

• 第三步：确认图表配置中x轴类型设置正确，必须开启datetime类型：

const options = {
  chart: {
    type: 'rangeBar'
  },
  xaxis: {
    type: 'datetime'
  }
}

• 第四步：将处理后的数据直接传给ReactApexChart组件的series属性即可正常渲染。

如果修改后仍不生效，优先检查两个点：

• 时间戳是否为毫秒级，如果是秒级时间戳需要乘以1000转换
• y字段是否严格为长度为2的数组，不能出现空值、长度不符的情况

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