echarts渲染大量数据的时候怎么做性能优化

1.

使用 useGPU / progressive 开启渐进式渲染

option = {
  series: [{
    type: 'line', // 或 'scatter'
    data: yourLargeDataArray,
    progressive: 5000, // 分批渲染，提升初次渲染速度
    progressiveThreshold: 10000, // 超过这个点数才启用 progressive
    large: true, // 启用大数据优化
    largeThreshold: 2000,
  }]
}

2.

降采样（下采样）

sampling: 'lttb' // Largest-Triangle-Three-Buckets， 或 'average', 'max', 'min'

series: [{
  type: 'line',
  sampling: 'lttb',
  data: yourData
}]

3.

使用 Canvas 而非 SVG

echarts.init(domElement, null, { renderer: 'canvas' });

4.

progressive

分批渲染（适合 scatter/line）

const option = {
  animation: false,
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', data: xData },
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    data: yData,
    large: true,
    largeThreshold: 2000,
    sampling: 'lttb',
    progressive: 5000,
    progressiveThreshold: 10000,
    symbol: 'none',
  }]
};

5. 启用

large

模式（大数据优化）

series: [{
  type: 'line',
  data: yourData,
  large: true,
  largeThreshold: 2000,
  symbol: 'none',
}]

设置

symbol: 'none'

避免每个点绘制图形

symbol: 'none',

• 若数据超过 10 万条，建议采用 Web Worker 后台处理或服务端聚合
• 图表只用于查看趋势，可以考虑改成图片或 canvas 缓存方式展示。
• 推荐配置

const option = {
  animation: false,
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', data: xData },
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    data: yData,
    symbol: 'none',
    large: true,
    largeThreshold: 2000,
    sampling: 'lttb',
    progressive: 5000,
    progressiveThreshold: 10000,
  }]
};