You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by "plainheart (via GitHub)" <gi...@apache.org> on 2025/09/26 06:09:59 UTC
[PR] fix(core): mark echarts instance object as raw in Vue [echarts]
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [PR] fix(core): mark echarts instance object as raw in Vue [echarts]
Posted by "github-actions[bot] (via GitHub)" <gi...@apache.org>.
github-actions[bot] commented on PR #21293:
URL: https://github.com/apache/echarts/pull/21293#issuecomment-3336928268
The changes brought by this PR can be previewed at: https://echarts.apache.org/examples/editor?version=PR-21293@17b6c77
<!-- ECHARTS_PR_PREVIEW -->
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [PR] fix(core): mark echarts instance object as raw in Vue [echarts]
Posted by "echarts-bot[bot] (via GitHub)" <gi...@apache.org>.
echarts-bot[bot] commented on PR #21293:
URL: https://github.com/apache/echarts/pull/21293#issuecomment-3337254100
Congratulations! Your PR has been merged. Thanks for your contribution! 👍
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [PR] fix(core): mark echarts instance object as raw in Vue [echarts]
Posted by "100pah (via GitHub)" <gi...@apache.org>.
100pah merged PR #21293:
URL: https://github.com/apache/echarts/pull/21293
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [PR] fix(core): mark echarts instance object as raw in Vue [echarts]
Posted by "echarts-bot[bot] (via GitHub)" <gi...@apache.org>.
echarts-bot[bot] commented on PR #21293:
URL: https://github.com/apache/echarts/pull/21293#issuecomment-3336908136
Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout [the coding standard](https://echarts.apache.org/en/coding-standard.html) and Wiki about [How to make a pull request](https://github.com/apache/echarts/wiki/How-to-make-a-pull-request).
The pull request is marked to be `PR: author is committer` because you are a committer of this project.
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org