ECharts Tooltip 不显示问题 - Vue Ref vs 普通变量

[trry-hub]

Vue version

3.5.21

Link to minimal reproduction

https://github.com/trry-hub/issues/tree/echarts

Steps to reproduce

问题描述

在 Vue 3 + ECharts 项目中，当使用 Vue 的 ref() 来存储 ECharts 实例时，图表的 tooltip 无法正常显示。但使用普通变量存储 ECharts 实例时，tooltip 可以正常工作。

What is expected?

两种方法都应该能够正常显示 tooltip，当鼠标悬停在图表上时应该显示相应的数据信息。

What is actually happening?

环境信息

• Vue 版本: 3.5.21
• ECharts 版本: 6.0.0
• TypeScript 版本: 5.9.2
• 构建工具: Vite 7.1.5

复现步骤

方法一：使用普通变量（tooltip 正常工作）

let chartInstance: null | echarts.ECharts = null
const chartDom = ref()

async function renderChart() {
  if (!chartInstance) {
    chartInstance = echarts.init(chartDom.value)
  }
  chartInstance.setOption(option)
}

方法二：使用 Vue ref（tooltip 不工作）

const chartInstanceVueRef = ref()
const chartDomUseRef = ref()

async function renderChartUseRef() {
  if (!chartInstanceVueRef.value) {
    chartInstanceVueRef.value = echarts.init(chartDomUseRef.value)
  }
  chartInstanceVueRef.value.setOption(option)
}

System Info

System:
    OS: macOS 15.6.1
    CPU: (8) arm64 Apple M1
    Memory: 94.39 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.19.0 - ~/.volta/tools/image/node/22.19.0/bin/node
    npm: 10.9.3 - ~/.volta/tools/image/node/22.19.0/bin/npm
    pnpm: 10.15.1 - ~/.volta/bin/pnpm
  Browsers:
    Chrome: 140.0.7339.133
    Safari: 18.6

Any additional comments?

实际行为

• 方法一（普通变量）: tooltip 正常显示 ✅
• 方法二（Vue ref）: tooltip 不显示 ❌

可能的原因分析

1. Vue 响应式系统干扰: Vue 的 ref 会将对象包装成响应式代理，可能影响 ECharts 内部的事件绑定机制
2. 事件监听器绑定问题: ECharts 的 tooltip 依赖于 DOM 事件，响应式代理可能影响事件监听器的正确绑定
3. 实例引用问题: 通过 ref 访问的 ECharts 实例可能与原始实例存在差异

临时解决方案

目前使用普通变量而非 Vue ref 来存储 ECharts 实例可以避免此问题。

[s3xysteak]

试试shallowRef呢。哪怕没有bug也不建议在这种情况下使用ref，因为ref会深层的对每一个属性做响应，对于这种复杂对象可能会导致严重性能问题