性能优化概述

掌握ECharts性能优化技巧，轻松应对百万级数据可视化

🚀 性能优化策略

---

📊 性能基准测试

不同数据量性能对比

数据量	普通模式	Large模式	渐进式	推荐方案
1千	50ms	45ms	48ms	普通模式
1万	200ms	80ms	100ms	Large模式
10万	2s	300ms	400ms	Large+渐进式
100万	OOM	3s	4s	采样+分片
1000万	OOM	OOM	OOM	服务端聚合

测试环境: Chrome 120, Intel i7-12700K, 16GB RAM

---

🔧 核心优化技术

1. Large模式 - 大数据优化

原理: 使用简化的渲染路径，关闭不必要的特效

{
  series: [{
    type: 'scatter',
    large: true,              // 开启大数据优化
    largeThreshold: 2000,     // 阈值(默认2000)
    progressive: 1000,        // 每帧渲染数量
    progressiveThreshold: 10000
  }]
}

性能提升:

• 10万数据: 6.7倍 提升
• 100万数据: 从OOM到可渲染

详细文档: Large模式详解

---

2. 渐进式渲染

原理: 将渲染任务分散到多帧，避免长任务阻塞

{
  progressive: 1000,           // 每帧渲染1000个图形
  progressiveThreshold: 10000, // 启用阈值
  progressiveChunkMode: 'mod'  // 分块模式: mod | sequential
}

效果:

• ✅ 保持页面响应
• ✅ FPS稳定在50+
• ❌ 总渲染时间略增加

详细文档: 渐进式渲染

---

3. 采样算法

原理: 智能减少数据点，保持视觉特征

{
  series: [{
    type: 'line',
    data: largeDataArray,
    sampling: 'lttb',  // LTTB算法(推荐)
    // sampling: 'average' | 'max' | 'min' | 'sum'
  }]
}

采样算法对比:

• lttb (Largest-Triangle-Three-Buckets) - 保持形状最佳
• average - 平均值采样
• max/min - 最大/最小值采样
• sum - 求和采样

压缩率: 10万 → 1000 (100:1)，视觉误差 < 1%

---

4. 渲染器选择

Canvas vs SVG:

特性	Canvas	SVG
适用数据量	> 1万	< 1万
内存占用	低	高
缩放清晰度	依赖DPR	矢量清晰
事件绑定	模拟	原生支持
动态更新	快	慢

选择建议:

// 大数据量、频繁更新 → Canvas
const chart = echarts.init(dom, 'canvas');

// 小数据量、需要清晰缩放 → SVG
const chart = echarts.init(dom, 'svg');

---

💾 内存管理

dispose销毁实例

// 正确销毁
chart.dispose();
chart = null;

// SPA路由切换
router.beforeEach((to, from, next) => {
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
  next();
});

// 组件卸载(Vue)
onUnmounted(() => {
  chart?.dispose();
});

// 组件卸载(React)
useEffect(() => {
  return () => chart?.dispose();
}, []);

常见内存泄漏

❌ 错误做法:

// 1. 未销毁实例
const chart = echarts.init(dom);
// 页面跳转后chart仍在内存中

// 2. 事件监听器未移除
chart.on('click', handler);
// 多次注册导致handler累积

// 3. 闭包引用大对象
function createChart() {
  const largeData = new Array(1000000).fill(0);
  chart.setOption({ series: [{ data: largeData }] });
}

✅ 正确做法:

// 1. 及时销毁
chart.dispose();

// 2. 移除事件监听
chart.off('click', handler);

// 3. 及时释放大对象
largeData = null;

详细文档: 内存管理

---

⚡ 其他优化技巧

1. 关闭不必要特效

{
  series: [{
    hoverAnimation: false,    // 关闭悬停动画
    animation: false,         // 关闭所有动画
    silent: true,             // 不响应鼠标事件
    emphasis: { disabled: true } // 关闭高亮
  }]
}

性能提升: 20-30%

详细文档: 关闭特效

---

2. 批量更新

// ❌ 错误: 多次setOption
chart.setOption({ series: [{ data: data1 }] });
chart.setOption({ series: [{ data: data2 }] });

// ✅ 正确: 批量更新
chart.setOption({
  series: [
    { data: data1 },
    { data: data2 }
  ]
});

---

3. 防抖resize

let resizeTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => {
    chart.resize();
  }, 100);
});

---

📈 性能监控

FPS监控

let lastTime = performance.now();
let frames = 0;

function monitor() {
  frames++;
  const currentTime = performance.now();
  
  if (currentTime - lastTime >= 1000) {
    console.log(`FPS: ${frames}`);
    frames = 0;
    lastTime = currentTime;
  }
  
  requestAnimationFrame(monitor);
}

monitor();

内存监控

if (performance.memory) {
  console.log('Used JS Heap:', performance.memory.usedJSHeapSize / 1024 / 1024, 'MB');
  console.log('Total JS Heap:', performance.memory.totalJSHeapSize / 1024 / 1024, 'MB');
}

---

🎯 优化检查清单

• [ ] 数据量 > 2000 时启用 large: true
• [ ] 数据量 > 10000 时启用渐进式渲染
• [ ] 折线图大数据量时使用 sampling: 'lttb'
• [ ] 选择合适的渲染器(Canvas/SVG)
• [ ] 关闭不必要的动画和特效
• [ ] 批量更新option，避免频繁setOption
• [ ] 页面卸载时调用 dispose()
• [ ] 移除不再需要的事件监听器
• [ ] 实现resize防抖
• [ ] 监控FPS和内存占用

---

深入学习

• 大数据 Large 模式 - 大数据优化详解
• 渐进式渲染详解 - 分帧渲染原理
• 内存管理 dispose - dispose最佳实践
• 关闭非必要特效 - 性能调优技巧

下一步查看 实战案例 了解真实项目中的性能优化！