Vue.js如何处理API返回的数组对象并转换为指定图表数据格式

• 先预定义和表头对齐的状态顺序，避免对象遍历出现乱序问题，同时定义月份数字和名称的映射关系
• 初始化图表数据，先填入固定表头
• 遍历接口返回的原始数据，逐个处理每个月份的统计值，按顺序拼接后加入结果数组

// 假设接口返回的原始数据存在rawData变量中
const rawData = { /* 你的接口返回数据 */ }

// 1. 预定义配置：和表头对齐的状态顺序、月份映射
const statusOrder = ['New', 'Verified', 'Regitered ID', 'On Playing', 'Finished', 'Active', 'Inactive']
const monthMap = {
  '1': 'January',
  '2': 'February',
  '3': 'March',
  // 按需补全剩下的月份
  '12': 'December'
}

// 2. 初始化chartData，先放表头
const chartData = [['Month', ...statusOrder]]

// 3. 遍历原始数据生成内容行
Object.entries(rawData).forEach(([monthKey, statusList]) => {
  // 拆分月份key拿到月份数字，比如'1-2021'拆分后取第一个值就是'1'
  const monthNum = monthKey.split('-')[0]
  const monthName = monthMap[monthNum]
  
  // 按状态顺序生成该行的统计数值
  const countList = statusOrder.map(status => {
    // 找到当前状态对应的条目，返回player_count，找不到默认0
    const item = statusList.find(i => i.status === status)
    return item ? item.player_count : 0
  })
  
  // 拼接月份名称和数值，加入chartData
  chartData.push([monthName, ...countList])
})

// 此时chartData就是你需要的格式，直接赋值给图表组件对应的属性即可
console.log(chartData)

你示例中给出的二月数值看起来是累加后的结果，如果你的实际需求是要对多个年份相同月份的数值做累加，可以在遍历的时候增加按月份分组累加的逻辑，上述代码默认是每个key对应一行数据，和你给出的一月的输出结果完全匹配。

内容的提问来源于stack exchange，提问作者dede.brahma