如何将后端数组数据转换为Vue-ApexCharts所需的series格式？

你已经从后端获取并过滤出包含created_at、date_end、name三个字段的数组数据，原始数据结构示例如下：

const rawData = [
  {
    name: "foo",
    created_at: "2023-05-10 16:52:49",
    date_end: "2023-05-15 12:34:00"
  },
  // 剩余9条数据...
];

需要将其转换为Vue-ApexCharts所需的series格式，目标格式示例：

series: [
  {
    data: [
      {
        x: 'Analysis',
        y: [
          new Date('2019-03-07').getTime(),
          new Date('2019-03-11').getTime()
        ],
        fillColor: '#008FFB'
      },
      // 更多数据项
    ]
  }
]

转换规则：

• x对应原始数据的name字段
• y是created_at和date_end转换为时间戳后的数组
• 每个数据项包含fillColor（可固定或动态设置）

实现方法 #

使用数组的map()方法遍历原始数据，逐个转换为符合要求的结构，最终包裹成series数组：

// 定义转换函数
const transformToSeries = (rawData) => {
  return [
    {
      data: rawData.map(item => ({
        x: item.name,
        y: [
          new Date(item.created_at).getTime(),
          new Date(item.date_end).getTime()
        ],
        fillColor: '#008FFB' // 若需要动态颜色，可在此添加判断逻辑，比如根据item.name区分
      }))
    }
  ];
};

// 调用示例
const rawData = [/* 你的原始数据数组 */];
const chartSeries = transformToSeries(rawData);

说明 #

1. map()方法会遍历原始数组的每一项，将每个对象转换为ApexCharts需要的data子项
2. new Date().getTime()将字符串格式的时间转换为时间戳，符合ApexCharts对时间轴数据的要求
3. 如果需要为不同数据项设置不同的fillColor，可以在map回调中添加条件判断，例如：

   fillColor: item.name === 'foo' ? '#008FFB' : '#00E396'
   

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