为什么echarts报错卡顿

ECharts 报错 + 卡顿通常由数据量、配置方式、渲染机制或代码错误引起。下面按「最常见原因 → 解决办法」给你梳理，基本能覆盖 90% 的情况。

一、最常见原因

1️⃣ 数据量太大（最常见）

• 几万、几十万条数据直接 setOption
• 使用 line / scatter 且未做降采样

表现

• 页面卡死
• 控制台报 RangeError / stack overflow
• 渲染极慢

解决

// 开启大数据优化
series: [{
  type: 'line',
  large: true,
  largeThreshold: 2000,
  sampling: 'lttb'
}]

或：

• 后端聚合
• 使用 dataset + dataZoom
• 减少 series 数量

2️⃣ setOption 使用错误（非常常见）

❌ 错误写法（每次都全量更新）：

chart.setOption(option) // 每 1s 调用一次

✅ 正确写法：

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

或只更新数据：

chart.setOption({
  series: [{ data }]
})

3️⃣ 频繁 resize 导致卡顿

• window.resize 无节流
• 容器尺寸变化触发多次重绘

解决

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

4️⃣ 容器没有固定宽高（隐形坑）

<div id="chart"></div>

但：

#chart { width: 100%; height: 0; }

结果

• ECharts 计算异常
• 卡顿 / 报错 / 白屏

✅ 必须：

#chart { width: 100%; height: 400px; }

5️⃣ tooltip 太复杂

• formatter 里做大量计算
• 使用 DOM 操作

解决

• formatter 只做字符串拼接
• 关闭 triggerOn hover 频繁触发

tooltip: {
  triggerOn: 'click'
}

6️⃣ 图表实例未销毁（内存泄漏）

• 组件切换不 dispose
• React / Vue 中尤常见

✅ React：

useEffect(() => {
  const chart = echarts.init(ref.current)
  return () => chart.dispose()
}, [])

7️⃣ 报错本身导致的连锁卡顿

常见报错：

• Cannot read properties of undefined
• xAxis is not defined
• series.data is undefined

➡ 每次报错都会中断渲染

排查方式

• 打开 Console
• 看第一个红色报错
• 通常是 option 写错

二、快速自查清单 ✅

你可以对照看看：

• [ ] 数据是否 > 1 万条
• [ ] 是否频繁 setOption
• [ ] 是否有 resize 节流
• [ ] 容器是否有宽高
• [ ] 是否 dispose
• [ ] 控制台第一个报错是什么

三、如果你愿意

你可以直接贴：

1. 报错信息
2. option 配置
3. 数据量
4. 使用框架（Vue / React / 原生）

我可以帮你精准定位是哪一行导致的卡顿。