简单记忆
- 封装 ECharts 为通用组件，在 onMounted 初始化，setOption 更新数据，监听 resize 加防抖做自适应，组件销毁时 dispose 释放实例，防止内存泄漏。
- 优化主要是复用实例、关闭动画、增量更新。
- 常见问题是容器没宽高、DOM 没挂载、实例没销毁。
一、项目中你怎么封装 ECharts？
把 ECharts 封装成通用可复用组件：
- 在 Vue 组件里用 ref 获取容器 DOM。
- 在 onMounted 生命周期里初始化图表。
- 通过 setOption 渲染配置和数据。
- 监听窗口变化（window.resize()）做自适应（chart.resize()）。
- 组件销毁时释放实例，防止内存泄漏。
- 支持响应式、loading、数据更新。
二、ECharts 怎么做自适应？
- 监听 window 的 resize 事件。
- 使用防抖（debounce）优化性能。
- 在回调里调用 chart.resize ()。
- 保证窗口变化时图表自动适配。
三、组件销毁时必须做什么？
必须销毁 ECharts 实例：
- 调用 chart.dispose ()。
- 清空 resize 监听。
- 清空定时器。不销毁会造成内存泄漏，页面越来越卡。
四、ECharts 性能优化（高频）
- 复用实例，不要重复 init。
- 使用 setOption 增量更新，不重新创建。
- 大数据关闭动画：animation: false。
- 减少阴影、渐变、多余标签。
- 大量数据使用 dataZoom 或分段渲染。
- 避免频繁 setOption，做节流防抖。
五、图表不显示 / 白屏原因
- 容器 DOM 没有设置宽高。
- 在 DOM 挂载前就初始化。
- 数据格式错误或为空。
- 多次初始化导致实例异常。
- 路由切换没销毁，实例污染。
六、两个图表如何联动？
- 给多个图表设置相同的 group。
- 使用 echarts.connect (group) 关联。
- 可实现 tooltip、brush、数据联动。
七、海量数据怎么渲染？
- 关闭动画。
- 数据采样、简化数据。
- 使用 dataZoom 只展示可视区域。
- 使用 appendData 追加数据。
- 避免一次性渲染大量节点。
