如何转换数据实现Apexcharts正确展示客户状态分类统计图表

你当前图表渲染不符合预期，是三个核心问题导致的：

• x轴分类数组category未做去重处理，同一月份重复出现，造成轴刻度错位
• 转换系列数据时没有按月份对齐数值，每个系列的data数组长度和去重后的x轴分类长度不匹配，无数据的月份没有补默认值0
• ApexCharts的series配置要求系列名称字段为name，你当前转换输出的字段是title，框架无法正确识别系列名称

直接替换原有数据转换的useEffect逻辑即可：

useEffect(() => {
  if (!clientsOverview?.length) return
  // 生成去重、按原顺序排列的x轴月份分类
  const category = [...new Set(clientsOverview.map(item => item.date))]
  // 初始化所有客户状态的系列数据，所有月份默认填0
  const allStatus = [...new Set(clientsOverview.map(item => item.clientStatus))]
  const data = allStatus.map(status => ({
    name: status,
    data: new Array(category.length).fill(0)
  }))
  // 遍历原始数据，将数值填充到对应月份、对应状态的位置
  clientsOverview.forEach(item => {
    const monthIndex = category.indexOf(item.date)
    const targetSeries = data.find(series => series.name === item.clientStatus)
    if (targetSeries && monthIndex !== -1) {
      targetSeries.data[monthIndex] = item.count
    }
  })

  setData(data)
  setCategory(category)
}, [clientsOverview])

如果后端返回的原始数据没有按时间从早到晚排序，可以在生成category后补充日期排序逻辑，保证x轴刻度顺序正确。

转换完成后你会得到符合ApexCharts要求的标准数据格式：

• x轴分类（无重复）：["Mar 2022", "Apr 2022", "May 2022", "Jun 2022"]
• 系列数据：

[
  {
    "name": "inactive",
    "data": [1, 0, 1, 1]
  },
  {
    "name": "active",
    "data": [1, 2, 0, 1]
  }
]

直接用现有组件代码渲染即可得到预期的按月统计面积图效果，如果需要调整堆叠样式、填充透明度、颜色等，直接在options字段增加对应配置即可。

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