问题：
在 el-dialog 动态弹窗场景里遇到了这个问题：
ECharts 图表能正常渲染，折线、柱状图图形完整无缺，鼠标滑过画布时，坐标轴指示器的虚线能跟着鼠标精准移动，控制台干干净净没有任何报错。唯独 Tooltip 悬浮提示框完全隐身，写在配置里的 formatter 函数连一次都不会被调用，不管怎么调整 trigger、confine 等常规配置都毫无反应。
解决办法：
只需要把存储图表实例的变量，从组件的 data() 或者普通 ref 里移出，直接挂载到组件上下文，Vue3 场景使用 shallowRef 存储，Tooltip 瞬间就能恢复正常。
核心原则：绝对不要把 ECharts 实例放到 Vue 的响应式数据中。
Vue2
const statLineChartInstance=null;
//打开弹窗
showDialog(){
const el = this.$refs.statLineChart;
if (!this.statLineChartInstance) {
this.statLineChartInstance = echarts.init(el);
}
this.statLineChartInstance.setOption()
}
//关闭弹窗
handleStatDialogClose() {
this.statDialogVisible = false;
this.statData = null;
if (this.statLineChartInstance) {
this.statLineChartInstance.dispose();
this.statLineChartInstance = null;
}
},
注意要在 el-dialog 的 @opened 生命周期钩子中调用 initChart，确保 DOM 完全挂载后再执行初始化逻辑。
Vue3
import { ref, shallowRef, nextTick, onUnmounted } from 'vue'
import * as echarts from 'echarts'
const dialogVisible = ref(false)
const chartContainer = ref(null)
// 使用 shallowRef 替代普通 ref，仅代理第一层，不侵入实例内部属性
const statChartInstance = shallowRef(null)
const handleDialogOpened = () => {
nextTick(() => {
if (!statChartInstance.value) {
statChartInstance.value = echarts.init(chartContainer.value)
} else {
statChartInstance.value.resize()
}
statChartInstance.value.setOption(chartOption)
})
}
onUnmounted(() => {
statChartInstance.value?.dispose()
})
底层根因分析:
这个问题，本质是 Vue 的响应式系统和 ECharts 的底层机制发生了隐形冲突，且冲突点刚好精准作用在 Tooltip 模块的逻辑上：
Vue2 场景的劫持破坏：Object.defineProperty 会递归遍历 ECharts 实例的所有公开和私有属性，包括存储 DOM 引用的 _dom、存储事件监听器的 _eventListeners、Tooltip 模块实例 _tooltip，全部添加 getter/setter 劫持。Tooltip 绑定鼠标事件时拿到的不是原生 DOM 对象，而是被拦截后的代理值，事件上下文直接错乱，浮层渲染逻辑根本不会触发。
Vue3 场景的代理全等失效：普通 ref 会对复杂对象做深度 Proxy 代理，ECharts 内部初始化 Tooltip 时，会用原生实例的引用作为唯一标识做全等判断 instance === originInstance，代理后的 Proxy 对象和原生对象全等判断返回 false，Tooltip 模块直接判定实例未完成初始化，静默跳过全部浮层渲染流程，全程不抛出任何报错。
为什么虚线能正常工作：坐标轴指示器的逻辑是直接在 canvas 画布上重绘线条，不需要依赖实例内部复杂的私有引用关系，所以哪怕实例被代理，依然能正常响应鼠标移动，这也是这个问题最具迷惑性的地方。
除此之外，把 ECharts 实例放在响应式数据里，还会带来隐形的内存泄漏风险：组件销毁时，响应式代理链会导致 ECharts 内部持有的 DOM 引用和事件回调无法被完全释放，路由多次切换后浏览器内存占用持续上涨，后续还会出现更多偶现的图表错乱问题。
总结
Vue 的响应式系统虽然强大，但它不是万能银弹，复杂第三方类实例、原生 DOM 对象这类特殊对象，绝对不适合放入响应式系统中。下次再遇到“图表渲染正常但 Tooltip 诡异失效”的问题，第一时间检查你的 ECharts 实例是否被响应式代理，99% 的概率能直接定位并解决问题。
