在前端开发中，我们经常会遇到从后端接口获取到数组对象类型的数据，而主流的图表库比如ECharts、Chart.js等都有各自要求的数据格式，这时候就需要将数组对象转换为图表友好的数据格式，才能让图表正常渲染展示。
常见的图表友好型数据格式
不同图表类型对应的友好数据格式存在差异，以下是几种高频出现的格式：
- 分类+数值格式：适合柱状图、折线图，通常需要两个数组，一个存分类名称，一个存对应数值
- 键值对数组格式：适合饼图，数组每个元素是包含名称和数值的对象
- 多维数组格式：适合热力图等复杂图表，需要二维数组存储对应位置的数据
转换核心思路
转换的核心逻辑可以总结为三步：
- 遍历原始数组对象，提取需要展示的字段
- 根据目标图表格式的要求，对提取的字段进行归类整理
- 将整理后的数据按照格式要求组装成最终的数组或对象
常见转换场景示例
场景一：转换为柱状图所需的分类+数值格式
假设原始数据是用户每个月的消费记录，需要转换为柱状图需要的格式，原始数据如下：
// 原始数组对象数据
const originalData = [
{ month: "一月", amount: 1200 },
{ month: "二月", amount: 1500 },
{ month: "三月", amount: 980 },
{ month: "四月", amount: 2100 }
];
转换后的目标格式需要两个数组，分别是月份数组和消费金额数组，转换代码如下：
// 转换函数
function transformToBarData(data) {
const categoryList = [];
const valueList = [];
data.forEach(item => {
categoryList.push(item.month);
valueList.push(item.amount);
});
return {
categories: categoryList,
values: valueList
};
}
// 调用转换函数
const barChartData = transformToBarData(originalData);
console.log(barChartData);
// 输出：{ categories: ["一月","二月","三月","四月"], values: [1200,1500,980,2100] }
场景二：转换为饼图所需的键值对数组格式
假设原始数据是不同产品的销量数据，需要转换为饼图需要的格式，原始数据如下：
// 原始数组对象数据
const productSales = [
{ productName: "手机", sales: 320 },
{ productName: "电脑", sales: 150 },
{ productName: "平板", sales: 80 },
{ productName: "耳机", sales: 210 }
];
饼图通常需要数组元素是包含name和value字段的对象，转换代码如下：
// 转换函数
function transformToPieData(data) {
return data.map(item => {
return {
name: item.productName,
value: item.sales
};
});
}
// 调用转换函数
const pieChartData = transformToPieData(productSales);
console.log(pieChartData);
// 输出：[
// {name: "手机", value: 320},
// {name: "电脑", value: 150},
// {name: "平板", value: 80},
// {name: "耳机", value: 210}
// ]
场景三：处理复杂嵌套的数组对象转换
如果原始数据存在嵌套结构，比如每个对象包含多个维度的数值，需要提取多个数值序列，原始数据如下：
// 原始嵌套数组对象数据
const multiDimensionData = [
{ date: "2024-01", online: 450, offline: 320 },
{ date: "2024-02", online: 520, offline: 280 },
{ date: "2024-03", online: 610, offline: 350 }
];
需要转换为折线图需要的两个数值序列，转换代码如下：
// 转换函数
function transformToMultiLineData(data) {
const dateList = [];
const onlineList = [];
const offlineList = [];
data.forEach(item => {
dateList.push(item.date);
onlineList.push(item.online);
offlineList.push(item.offline);
});
return {
dates: dateList,
series: [
{ name: "线上销量", data: onlineList },
{ name: "线下销量", data: offlineList }
]
};
}
// 调用转换函数
const lineChartData = transformToMultiLineData(multiDimensionData);
console.log(lineChartData);
转换时的注意事项
- 转换前先确认目标图表库的具体格式要求，不同库的字段名可能有差异，比如有的饼图要求数值字段叫
count而不是value - 如果原始数据存在缺失字段的情况，需要提前做默认值处理，避免转换后出现
undefined导致图表渲染异常 - 如果数据量较大，可以考虑使用
reduce方法替代forEach减少遍历次数，提升转换效率
通过上述方法，我们可以快速应对大部分数组对象到图表友好型数据格式的转换需求，实际开发中可以根据具体场景调整转换逻辑，适配不同的图表类型。
JavaScript数组对象数据转换图表数据echarts修改时间：2026-06-17 02:57:27