echarts-bot[bot] commented on issue #21267: URL: https://github.com/apache/echarts/issues/21267#issuecomment-3299050599
@trry-hub It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗 <details><summary><b>TRANSLATED</b></summary><br> **TITLE** [Bug] ECharts Tooltip Not Displaying Issue - Vue Ref vs Regular Variable **BODY** ### Version6.0.0### Link to Minimal Reproductionhttps://github.com/trry-hub/issues/tree/echarts### Steps to Reproduce## Reproduction Steps### Method 1: Using regular variable (tooltip works fine)```typescriptlet chartInstance: null | echarts.ECharts = nullconst chartDom = ref()async function renderChart() { if (!chartInstance) { chartInstance = echarts.init(chartDom.value) } chartInstance.setOption(option)}```### Method 2: Using Vue ref (tooltip does not work)```typescriptconst chartInstanceVueRef = ref()const chartDomUseRef = ref()async function renderChartUseRef() { if (!chartInstanceVueRef.value) { chartInstanceVueRef.value = echarts.init(chartDomUseRef.value) } chartInstanceVueRef.value.setOption(option)}```### Current BehaviorIn Vue 3 ECharts project, when using Vue's `ref()` to store the ECharts instance, the chart's tooltip does not display correctly. However, when using a regular variable to store the ECharts instance, the tooltip works fine.### Expected Behavi orBoth methods should be able to display the tooltip correctly, showing the corresponding data information when hovering over the chart.### Environment```markdownSystem: 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?## Possible Cause Analysis1. **Vue reactive system interference**: Vue's ref wraps the object into a reactive proxy, which could affect ECharts' internal event binding mechanism.2. **Event listener binding issue**: ECharts' tooltip relies on DOM events, and the reactive proxy may interfere with the correct binding of event listeners.3. **Instance reference issue**: The ECharts instance accessed via ref may differ from the original instance.## Temporary SolutionCurrent ly, using a regular variable instead of Vue ref to store the ECharts instance can avoid this issue. </details> -- 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]
