单页多ECharts折线图差异化数据映射及setOption报错解决

方法1：将映射函数改为可传参版本 #

把原来固定参数的datamapping改成支持传入自定义参数的函数，这样每个图表调用时传入对应的参数即可，完全复用函数，不会出现命名冲突或识别问题。

// 改造后的可复用映射函数
function datamapping(data, mappingParam) {
  // 用map返回新数组，避免修改原始数据
  return data.map(item => [
    otherFunctionForMapping(item[0], mappingParam),
    item[1]
  ]);
}

// 图表1的配置
const option1 = {
  dataset: {
    source: datamapping(rawData, 'paramForChart1')
  },
  xAxis: { type: 'category' },
  yAxis: { type: 'value' },
  series: [{ type: 'line' }]
};

// 图表2的配置
const option2 = {
  dataset: {
    source: datamapping(rawData, 'paramForChart2')
  },
  xAxis: { type: 'category' },
  yAxis: { type: 'value' },
  series: [{ type: 'line' }]
};

// 初始化两个图表
const chart1 = echarts.init(document.getElementById('chart1'));
chart1.setOption(option1);

const chart2 = echarts.init(document.getElementById('chart2'));
chart2.setOption(option2);

这种方式直接给dataset.source传入处理好的数组，完全符合ECharts的要求，不会触发报错。

方法2：批量处理多图表数据源（适合大量图表场景） #

如果需要创建多个图表，可以先整理所有图表的参数配置，批量生成处理后的数据源并初始化图表，代码更简洁易维护。

// 所有图表的ID和对应映射参数
const chartList = [
  { domId: 'chart1', mappingParam: 'serverParam1' },
  { domId: 'chart2', mappingParam: 'serverParam2' },
  { domId: 'chart3', mappingParam: 'serverParam3' }
];

// 批量处理数据并初始化图表
chartList.forEach(item => {
  const processedData = datamapping(rawData, item.mappingParam);
  const option = {
    dataset: { source: processedData },
    xAxis: { type: 'category' },
    yAxis: { type: 'value' },
    series: [{ type: 'line' }]
  };
  const chart = echarts.init(document.getElementById(item.domId));
  chart.setOption(option);
});

关于原回调写法报错的原因 #

ECharts的dataset.source只接受直接的数据集（数组或对象），不支持传入回调函数。你之前的写法会导致ECharts在内部处理流程中触发异常，所以必须提前完成数据映射，再把处理好的结果传入配置。

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