plainheart opened a new pull request, #21293: URL: https://github.com/apache/echarts/pull/21293
<!-- Please fill in the following information to help us review your PR more efficiently. --> ## Brief Information This pull request is in the type of: - [x] bug fixing - [ ] new feature - [ ] others ### What does this PR do? For a long time, many Vue developers have used `ref` or `reactive` by default to wrap the echarts instance object. As a result, ECharts' internal properties are also converted into a `Proxy`. As a result, all judgment logic in the ECharts internal code that uses `===` to determine whether two objects are identical returns `false`, which causes some components, such as the tooltip under the axis, not to function properly. Example: <img width="588" height="671" alt="image" src="https://github.com/user-attachments/assets/67f8bd52-e140-4719-bea3-9083ea41b277"; /> In the above code snippet, axis is the original object, but `coordSys.getAxis(axis.dim)` returns a proxied object. The two are no longer identical, resulting in missing data collected by collectSeriesInfo and a non-functional axis tooltip. Similar code libraries may also contain similar situations. Although I previously added relevant instructions at [FAQ](https://echarts.apache.org/faq.html#others) and included [usage warnings](https://vuejs.org/api/reactivity-advanced.html#markraw) from the official Vue documentation, and reiterated this in the GitHub issue: https://github.com/apache/echarts/issues/17723#issuecomment-1268311307, many developers still remain unaware and continue to file issues. Until I saw another issue today, I thought it is time to address this issue. I've considered two solutions to this problem: - **Prominently remind Vue users in the documentation or Handbook to use `shallowRef`, `shallowReactive`, or common variables to receive echarts instances, or to mark instances as non-proxied using `markRaw`.** - But this does not solve the root issue. - **Add a line of Vue-specific code to the echarts constructor to mark echarts objects as non-proxied by default.** - This is what this PR does. ### Fixed issues - Fix #21267 - Fix #21225 - Fix #17723 - More similar issues ## Details ### Before: What was the problem? When wrapping the echarts instance object with `ref/reactive` in Vue, some components, like `tooltip`, can't work as expected. ### After: How does it behave after the fixing? Mark the echarts instance as raw to prevent the object from being converted to a proxy. <img width="1468" height="765" alt="image" src="https://github.com/user-attachments/assets/a5c7a794-3b60-4ffc-91f6-e5338515d4b4"; /> ## Document Info One of the following should be checked. - [x] This PR doesn't relate to document changes - [ ] The document should be updated later - [ ] The document changes have been made in apache/echarts-doc#xxx ## Misc ### ZRender Changes - [ ] This PR depends on ZRender changes (ecomfe/zrender#xxx). ### Related test cases or examples to use the new APIs See `test/echarts-in-vue.html` ## Others ### Merging options - [ ] Please squash the commits into a single one when merging. ### Other information -- 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]
