Echarts性能优化：如何提升成百上千系列2D散点/折线图性能？

1. 合并相似系列（核心优化） #

成千上万个独立系列是性能瓶颈的主要来源——Echarts对每个系列都会单独初始化渲染逻辑、事件监听，开销远高于单系列的大量数据点。

• 将同类型的多系列数据合并为单个系列，用数据项的自定义字段（如seriesId）区分原系列归属
• 示例改造：把1000个折线系列合并为1个，通过itemStyle.color根据seriesId分配颜色，用tooltip显示原系列名称

2. 关闭冗余交互与视觉效果 #

• 关闭所有不必要的动画：设置animation: false、animationDurationUpdate: 0
• 移除大量无意义的图例：成千上万个图例既无法阅读，又占用渲染资源，改用自定义筛选组件（如下拉框、复选框组）控制系列显示
• 禁用非关键系列的交互：给不需要响应鼠标事件的系列设置silent: true，减少事件监听开销
• 简化样式：去掉阴影、渐变、复杂线条样式，使用纯色、基础线条宽度

3. 数据抽样与动态加载 #

• 对超大数据点进行抽样：保留极值、拐点等关键数据，或按固定间隔采样（比如1000个点抽100个），减少渲染量
• 实现视图范围加载：仅渲染当前图表可视区域内的数据，用户缩放/平移时再加载对应范围的数据，避免一次性渲染全量数据

4. 利用Echarts内置优化能力 #

• 合并系列后开启large和progressive配置：这两个参数原本针对单系列大数据，合并后就能生效，开启后Echarts会采用Canvas批量渲染策略，减少重绘次数
• 使用dataset组件管理数据：相比给每个系列单独传data，dataset的批量数据处理有内部优化，能降低内存占用

示例代码改造（合并系列） #

// 假设originalSeries是你原本的上千个系列数组
const mergedData = [];
const seriesNames = [];

originalSeries.forEach((series, idx) => {
  seriesNames.push(series.name);
  series.data.forEach((value, xIdx) => {
    mergedData.push({
      x: xIdx,
      y: value,
      seriesId: idx
    });
  });
});

const option = {
  dataset: {
    source: mergedData,
    dimensions: ['x', 'y', 'seriesId']
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{
    type: 'line',
    encode: { x: 'x', y: 'y' },
    large: true,
    progressive: 1000,
    itemStyle: {
      color: (params) => {
        // 按系列ID分配不同色调
        return echarts.color.modifyHSL('#2f4554', params.data.seriesId * 8);
      }
    },
    lineStyle: { width: 1 }
  }],
  tooltip: {
    formatter: (params) => `${seriesNames[params.data.seriesId]}: ${params.data.y}`
  },
  animation: false
};

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