基于JSON数据的ECharts动态多折线图数据转换方法

阿华AIGC实验室

2026-5-13

如何将动态产品JSON数据转换为ECharts多折线图格式

嘿，我刚好处理过几乎一模一样的需求！要把你给出的这份按日期、产品分散的JSON数据，转换成ECharts多折线图能直接用的结构，核心就是按产品分组+整理统一的日期轴，完全可以动态适配任意数量的产品。我给你一步步拆解，附完整代码示例：

第一步：明确ECharts多折线图的需求格式

ECharts的折线图需要两个核心部分：

xAxis.data：所有要展示的日期（按顺序排列）
series：一个数组，每个元素对应一条折线，包含产品名(name)和该产品在各个日期的数值(data)，数值数组的顺序要和xAxis.data的日期顺序完全对应

第二步：用JavaScript处理原始数据

假设你的原始数据是这样的（先把JSON转成JS对象）：

const rawData = [
  {date: "2019-05-21 00:00:00 UTC", value: 100, product: 'p1'},
  {date: "2019-05-21 00:00:00 UTC", value: 50, product: 'p2'},
  {date: "2019-05-19 00:00:00 UTC", value: 200, product: 'p3'},
  {date: "2019-05-18 00:00:00 UTC", value: 70, product: 'p1'},
  {date: "2019-05-18 00:00:00 UTC", value: 125, product: 'p2'},
  {date: "2019-05-18 00:00:00 UTC", value: 55, product: 'p3'}
];

1. 提取并排序所有唯一日期

首先要把所有出现过的日期提取出来，去重后按时间顺序排序，这样x轴才是正确的时间流向：

// 提取所有日期并去重
const allDates = [...new Set(rawData.map(item => item.date))];
// 按日期升序排序（要降序就把a和b调换位置）
allDates.sort((a, b) => new Date(a) - new Date(b));

2. 按产品分组，填充对应日期的数值

接下来把每个产品的数值按日期顺序整理成数组，如果某个产品在某日期没有数据，用null填充（ECharts会自动生成折线断点），或者用0填充（显示为0值），看你的业务需求：

// 用对象存储每个产品的数值数组
const productDataMap = {};

rawData.forEach(item => {
  const { product, date, value } = item;
  // 第一次遇到该产品时，初始化一个和日期数组长度一致的空数组
  if (!productDataMap[product]) {
    productDataMap[product] = new Array(allDates.length).fill(null);
  }
  // 找到当前日期在日期数组中的索引，填充对应数值
  const dateIndex = allDates.indexOf(date);
  if (dateIndex !== -1) {
    productDataMap[product][dateIndex] = value;
  }
});

3. 组装成ECharts需要的Series数组

把刚才的产品数据对象转换成ECharts的series格式：

const series = Object.entries(productDataMap).map(([productName, data]) => ({
  name: productName,
  type: 'line',
  data: data
}));

第三步：生成完整的ECharts配置项

最后把所有部分组装成ECharts的option，直接传给ECharts实例即可：

const option = {
  title: {
    text: '产品数值趋势图'
  },
  tooltip: {
    trigger: 'axis', // 鼠标悬停时显示所有产品在该日期的数值
    axisPointer: { type: 'cross' }
  },
  legend: {
    data: Object.keys(productDataMap) // 自动生成图例，对应所有产品
  },
  xAxis: {
    type: 'category',
    data: allDates,
    axisLabel: {
      rotate: 30 // 日期文本太长时旋转，避免重叠
    }
  },
  yAxis: {
    type: 'value'
  },
  series: series
};

// 初始化ECharts实例并设置配置
const myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);