这里有个小坑要注意：容器必须有明确的高度。Echarts 不会自动撑开父容器的高度，Ru果父容器高度为 0，那你无论怎么配置，图表dou显示不出来。我在样式里加了个 `min-height`，就是为了防止这种尴尬情况。

接下来是脚本的核心部分。我们需要在组件挂载后初始化图表，并在数据变化时geng新图表，在容器尺寸变化时重绘图表。

这段代码里藏着几个关键点。我们使用了 `shallowRef` 而不是 `ref`。因为 Echarts 的实例对象非常庞大，Ru果使用 `ref` 进行深层响应式代理，会带来巨大的性Neng开销。`shallowRef` 只跟踪引用本身的变化，这就足够了。

关于 `watchEffect` 和 `setOption`。这里我们监听了 `props.options` 的变化。一旦父组件传入了新的配置，图表就会自动geng新。这比手动调用某个 update 方法要优雅得多。

Zui后也是Zui重要的一点：销毁。在 `watch` 的 cleanup 函数里我们调用了 `instance.dispose`。这是防止内存泄漏的关键。Ru果不销毁，随着组件的频繁创建和销毁，浏览器的内存会被一点点吃光，Zui终导致页面卡顿甚至崩溃。

在早期的 Echarts 使用中，我们习惯给 DOM 元素设置一个 ID，然后 `echarts.init`。这在单页面单图表的时候没问题。但一旦你封装成组件，并在一个页面里循环使用这个组件，比如在一个列表里展示十个图表，麻烦就来了。

Ru果 ID 是写死的，比如 `chart-main`，那么页面上就会有十个 ID 为 `chart-main` 的元素。Echarts 在初始化时可Neng会抓取到错误的 DOM 节点，或者导致事件监听混乱，甚至出现数据覆盖的情况——明明点的是第一个图，数据却跑到了第二个图上。

解决这个问题的根本办法就是：彻底抛弃 ID，改用 Ref。就像我们在上面代码中Zuo的那样，通过 Vue 的 `ref` 或 `useTemplateRef` 直接获取 DOM 元素的引用。因为 Vue 的 ref 是组件内部隔离的，无论你实例化多少个组件，每个组件内部的 `container` 引用dou是独一无二的，完美解决了 ID 重复的问题。

封装完组件本身，工作其实只完成了一半。为了让这个组件真正好用，我们还需要考虑“配置分离”。

在实际业务中，`option` 的配置往往非常复杂，动辄几百行代码。Ru果把这些配置dou写在 Vue 组件的 `

这样一来组件只负责“渲染”，配置文件负责“长什么样”，业务页面负责“数据”。三者各司其职，代码结构瞬间清晰了许多。

此外作为一个负责任的开发者，别忘了给你的组件写一份 README 文档。哪怕只是简单的几行字，说明一下 `options` 支持哪些字段，`chartClick` 事件返回的数据结构是什么douNeng让接手你代码的同事感激涕零。

封装 Echarts 组件，kan似只是简单的代码重组，实则体现了我们对前端工程化的理解。从Zui初的安装引入，到利用 Vue 3 的 Composition API 处理响应式逻辑，再到解决 ID 冲突和内存泄漏，每一步dou需要我们细心打磨。

通过今天的学习，希望你Neng掌握这套封装思路：利用 `shallowRef` 优化性Neng，利用 `useResizeObserver` 实现丝滑的自适应，利用 Ref 代替 ID 避免冲突。当你把这些细节dou处理好之后你会发现，原本枯燥的数据可视化开发，竟然也Neng变得如此赏心悦目。

别再犹豫了赶紧去你的项目里试试吧！把那些散落在各处的 Echarts 初始化代码统统删掉，换上你亲手打造的通用组件，享受那种掌控全局的快感吧。