ECharts实例未正确清理是Vue3大屏路由切换后空白、卡顿、崩溃的主因，须结合onActivated/onDeactivated与onUnmounted分层管控，确保“谁创建谁销毁”，初始化前检测并dispose已有实例，清除定时器、事件监听及数据更新，并避免重复init导致内存泄漏。
Vue3 大屏项目路由切换后页面空白、卡顿甚至崩溃，根源常在 ECharts 实例没被正确清理。尤其使用若依等带 keep-alive 的后台框架时，onUnmounted 不一定会触发，只靠它清理根本不够。必须结合组件守卫（onActivated/onDeactivated）做分层管控。
ECharts 实例必须“谁创建、谁销毁”
每个 echarts.init() 都会分配独立内存空间。不调用 dispose()，实例就一直驻留在内存里，绑定的事件、定时器、DOM 引用全都不会释放。
- 初始化前先查：用
echarts.getInstanceByDom(dom)检测是否已有实例，有则先echarts.dispose() - 禁止“只赋 null”：写
chart = null没用，必须显式调用dispose() - 多个图表要循环处理：不能只清一个，漏掉任何一个都可能引发后续 DOM 渲染失败
切页时立刻停掉所有副作用
页面从激活态变为非激活态（比如切换菜单），视觉上还在，但逻辑上已不该运行。这时必须切断所有外部依赖：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- 清除所有
setInterval/setTimeout，并置空 timer 变量 - 移除
window.addEventListener('resize', ...)等全局监听，否则 resize 事件会在其他页面持续触发，干扰渲染 - 暂停图表数据更新、接口请求、
setOption调用——加个isPageActive开关，在onDeactivated中设为 false，在onActivated中重置为 true
生命周期钩子必须成对使用
大屏页面不是普通单页，得按“临时隐藏”和“彻底销毁”两种状态分别响应：
-
onMounted：只做初始化（init 图表、启定时器、绑 resize） -
onDeactivated：页面被缓存但不可见 → 销毁图表、清定时器、解绑事件、暂停逻辑 -
onActivated：页面重新可见 → 重新 init（或复用）、恢复定时器、拉新数据 -
onUnmounted：最终兜底 → 再次检查 dispose 和 clear，确保万无一失
避免重复 init 导致的 DOM 污染
错误写法是每次轮询或切回都无脑 echarts.init(dom)，旧实例还在跑，新实例又占一块内存，很快浏览器就扛不住。
- 推荐复用：查到已有实例就直接
chart.setOption(option)，不新建 - 或稳妥销毁再建：先
echarts.dispose(existingChart)，再echarts.init(dom) - 无论哪种，
setOption前建议加chart.clear()，避免图层叠加导致渲染异常
