trry-hub opened a new issue, #21267: URL: https://github.com/apache/echarts/issues/21267
### Version 6.0.0 ### Link to Minimal Reproduction https://github.com/trry-hub/issues/tree/echarts ### Steps to Reproduce ## 复现步骤 ### 方法一：使用普通变量（tooltip 正常工作） ```typescript 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 不工作） ```typescript const chartInstanceVueRef = ref() const chartDomUseRef = ref() async function renderChartUseRef() { if (!chartInstanceVueRef.value) { chartInstanceVueRef.value = echarts.init(chartDomUseRef.value) } chartInstanceVueRef.value.setOption(option) } ``` ### Current Behavior 在 Vue 3 + ECharts 项目中，当使用 Vue 的 `ref()` 来存储 ECharts 实例时，图表的 tooltip 无法正常显示。但使用普通变量存储 ECharts 实例时，tooltip 可以正常工作。 ### Expected Behavior 两种方法都应该能够正常显示 tooltip，当鼠标悬停在图表上时应该显示相应的数据信息。 ### Environment ```markdown 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? ## 可能的原因分析 1. **Vue 响应式系统干扰**: Vue 的 ref 会将对象包装成响应式代理，可能影响 ECharts 内部的事件绑定机制 2. **事件监听器绑定问题**: ECharts 的 tooltip 依赖于 DOM 事件，响应式代理可能影响事件监听器的正确绑定 3. **实例引用问题**: 通过 ref 访问的 ECharts 实例可能与原始实例存在差异 ## 临时解决方案 目前使用普通变量而非 Vue ref 来存储 ECharts 实例可以避免此问题。 -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
