怎样优化echarts渲染性能

优化 ECharts 渲染性能可以从数据量、配置项、渲染方式、DOM 与更新策略等多个维度入手。下面按「常见瓶颈 → 优化手段」来梳理，比较实用。

一、减少数据量（最关键）

1. 数据降采样（Downsampling）

• 百万级点用 line / scatter 时，先做聚合或抽稀
• ECharts 自带：

  series: [{
    type: 'line',
    sampling: 'lttb', // 或 'average' / 'max' / 'min'
    large: true,
    largeThreshold: 2000
  }]
  

2. 限制显示范围

• 使用 dataZoom 只渲染可视区域
• 后端分页 / 分片加载

二、使用高性能渲染模式

3. 开启大数据模式

series: [{
  type: 'scatter',
  large: true,
  largeThreshold: 1000
}]

4. 使用 Canvas 而非 SVG

• 默认是 Canvas（性能更好）
• 明确避免：

  renderer: 'svg' // 大数据下慢
  

三、优化 setOption 调用

5. 避免整图 setOption

❌ 错误：

chart.setOption(option) // 每次都全量

✅ 正确：

chart.setOption({
  series: [{ data: newData }]
}, false, true) // 不合并、不动画

6. 关闭不必要动画

animation: false

或在更新时：

chart.setOption(option, {
  notMerge: false,
  lazyUpdate: true
})

四、DOM 与容器优化

7. 控制图表数量

• 单页 ≤ 5–10 个图表
• 不在 v-for 里无限制创建 ECharts

8. 正确的 resize 策略

• resize 防抖

window.addEventListener('resize', debounce(() => {
  chart.resize()
}, 200))

9. 销毁无用实例

chart.dispose()

五、特殊场景优化

10. 地图性能

• 简化 GeoJSON
• 使用 map + geo 分离
• 避免过多 effectScatter

11. 实时数据

• 用 appendData（部分系列支持）
• 控制刷新频率（如 1s 一次）

12. Web Worker（高级）

• 数据计算放 Worker
• 主线程只负责渲染

六、调试手段

• chart.getRenderedCanvas() 看渲染耗时
• Chrome Performance 面板
• ECharts 官方：

  https://echarts.apache.org/zh/tutorial.html#%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96

快速检查清单 ✅

• [ ] 是否开启 large
• [ ] 是否关闭动画
• [ ] 是否避免全量 setOption
• [ ] 是否控制图表数量
• [ ] 是否对大数据降采样

如果你有具体场景（如：实时折线、地图、表格联动），我可以给更针对性的优化方案。