fix(core): mark echarts instance object as raw in Vue #21293
Merged
+328
−0
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…and more similar issues)
echarts-bot
bot
added
PR: author is committer
PR: awaiting review
PR: doc unchanged
labels
|
Thanks for your contribution! The pull request is marked to be |
Contributor
|
The changes brought by this PR can be previewed at: https://echarts.apache.org/examples/editor?version=PR-21293@17b6c77 |
100pah
approved these changes
Sep 26, 2025
|
Congratulations! Your PR has been merged. Thanks for your contribution! 👍 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Brief Information
This pull request is in the type of:
What does this PR do?
For a long time, many Vue developers have used
reforreactiveby default to wrap the echarts instance object, which makes ECharts' internal properties also converted into aProxy. As a result, all judgment logic in the ECharts internal code that uses===to determine whether two objects are identical returnsfalse, which causes some components, such as the tooltip under the axis, not to function properly. Example: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 and included usage warnings from the official Vue documentation, and reiterated this in the GitHub issue: #17723 (comment), 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 usingmarkRaw. - 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
Details
Before: What was the problem?
When wrapping the echarts instance object with
ref/reactivein Vue, some components, liketooltip, 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.
Document Info
One of the following should be checked.
Misc
ZRender Changes
Related test cases or examples to use the new APIs
See
test/echarts-in-vue.htmlOthers
Merging options
Other information