如何将原始数据转换为ApexCharts适配的series与xaxis格式

之前实现出现categories与series长度不匹配、缺失月份未补0的核心原因是：没有先固定全局统一的分类基准，分组生成数据和分类提取的顺序颠倒。以下是可直接复用的实现逻辑：

实现步骤 #

• 第一步：提取所有月份，去重后按业务需要的顺序排序，生成x轴全局唯一的categories数组
• 第二步：按clientStatus字段对原始数据做分组，存储每个状态下「月份-统计值」的映射关系
• 第三步：遍历每个状态分组，对照固定好的categories数组逐位取值，无对应统计值的位置直接补0，保证每个系列的data数组长度和categories完全一致

可直接运行的实现代码 #

// 原始数据格式参考
// const clientsOverview = [
//   { date: 'Jan', count: 120, clientStatus: 'active' },
//   { date: 'Feb', count: 89, clientStatus: 'active' },
//   { date: 'Apr', count: 75, clientStatus: 'active' },
//   { date: 'Jan', count: 32, clientStatus: 'inactive' },
//   { date: 'Mar', count: 45, clientStatus: 'inactive' },
// ]

// 1. 生成全局统一顺序的x轴月份分类
const allMonths = [...new Set(clientsOverview.map(item => item.date))]
// 月份排序规则：按自然月顺序排列，可根据自身业务替换为中文月份/数字月份的顺序
const monthSortWeight = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
// 如果原始数据本身已经按月份顺序返回，可跳过sort步骤
const categories = allMonths.sort((a, b) => monthSortWeight.indexOf(a) - monthSortWeight.indexOf(b))

// 2. 按客户状态分组，存储每个状态下月份对应的统计值
const statusGroup = clientsOverview.reduce((res, item) => {
  const { clientStatus, date, count } = item
  if (!res[clientStatus]) res[clientStatus] = {}
  res[clientStatus][date] = count
  return res
}, {})

// 3. 生成符合ApexCharts规范的series数组，缺失月份自动补0
const series = Object.entries(statusGroup).map(([statusName, monthCountMap]) => ({
  name: statusName,
  // 严格按照categories的顺序生成data，缺值补0，长度完全对齐
  data: categories.map(month => monthCountMap[month] ?? 0)
}))

// 最终图表配置
const chartConfig = {
  chart: {
    type: 'area',
    height: 350
  },
  // 样条曲线配置
  stroke: {
    curve: 'smooth'
  },
  xaxis: {
    categories: categories
  },
  series: series,
  // 其余面积图配置（填充、tooltip、图例等）可根据需求自行扩展
}

注意事项 #

• 顺序优先级：必须先生成全局统一、顺序固定的categories数组，再基于该数组逐一生成每个系列的data，从根源避免长度不匹配问题，不要先分组提取数据再倒推分类
• 格式适配：如果原始数据的date字段是时间戳/完整日期格式，先在提取月份的步骤里格式化成需要的月份文本再做后续处理
• 固定月份需求：如果需要固定展示12个自然月（哪怕某个月全状态都没有数据），直接把categories替换成固定的12个月份数组即可，补0逻辑会自动适配
• 空值判断：用空值合并运算符??做缺失值判断，不会把原始count为0的有效数据错误覆盖

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