You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by wa...@apache.org on 2022/10/08 06:34:16 UTC
[echarts-www] branch master updated: feat(faq): add a new item for Vue-related FAQ. (apache/echarts#17723)
This is an automated email from the ASF dual-hosted git repository.
wangzx pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-www.git
The following commit(s) were added to refs/heads/master by this push:
new fba47a86 feat(faq): add a new item for Vue-related FAQ. (apache/echarts#17723)
fba47a86 is described below
commit fba47a8699a031e94c34744e604b1126a89c35ea
Author: plainheart <yh...@all-my-life.cn>
AuthorDate: Sat Oct 8 14:32:27 2022 +0800
feat(faq): add a new item for Vue-related FAQ. (apache/echarts#17723)
---
_jade/en/faq.jade | 10 ++++++++++
_jade/zh/faq.jade | 9 ++++++++-
2 files changed, 18 insertions(+), 1 deletion(-)
diff --git a/_jade/en/faq.jade b/_jade/en/faq.jade
index cb1f4873..1c5b58b8 100644
--- a/_jade/en/faq.jade
+++ b/_jade/en/faq.jade
@@ -117,6 +117,16 @@ block content
li Whether<code>echarts</code> variable exists.
li Whether the DOM container has a width or height when calling <code>echarts.init</code>.
+ h3 Why does the chart not work correctly when using ECharts in Vue?
+ p If you are using Vue 3, avoid using `reactive` and `ref`.
+ p If you are using Vue 2, avoid declaring the ECharts instance object in the `data` function or using the `Vue.observable` API.
+ p All of the above will cause the echarts instance object to be proxied as a reactive object, which may affect the access to the properties of inner models of ECharts and bring some unexpected issues and lousy performance.
+ p The suggestion is to declare the echarts instance object as a normal variable, or use `shallowRef`/`shallowReactive`/`markRaw` API to prevent the instance object from being proxied.
+ p See also <a href="https://github.com/apache/echarts/issues/17723#issuecomment-1268311307" target="blank">#17723</a> and <a href="https://vuejs.org/api/reactivity-advanced.html#markraw" target="_blank">the usage caution from Vue documentation</a>.
+
+ h3 Are there more resources for learning ECharts?
+ p Please refer to <a href="https://github.com/ecomfe/awesome-echarts" target="blank">awesome-echarts</a> for more related projects and resources.
+
include ../components/inner-footer
block extra_js
script(type='text/javascript').
diff --git a/_jade/zh/faq.jade b/_jade/zh/faq.jade
index 6be969d8..f0dda450 100644
--- a/_jade/zh/faq.jade
+++ b/_jade/zh/faq.jade
@@ -116,8 +116,15 @@ block content
li <code>echarts</code> 变量是否存在；
li 调用 <code>echarts.init</code> 的时候，DOM 容器是否有宽高。
+ h3 为什么在 Vue 中使用 ECharts 时图表显示异常？
+ p 如果你使用的是 Vue 3，请避免使用 `reactive` 及 `ref`。
+ p 如果你使用的是 Vue 2，请避免在 `data` 函数中声明 ECharts 的对象实例或使用 `Vue.observable` API。
+ p 上述均会导致 ECharts 的对象实例被代理成为响应式对象，影响 ECharts 对内部属性的访问，可能会导致图表无法正确显示等一系列意外问题，且会由于深度监听而极大地降低图表展示性能。
+ p 解决方案为：使用普通变量声明 ECharts 对象实例，或使用 `shallowRef`/`shallowReactive`/`markRaw` 等 API 防止 ECharts 对象实例被代理。
+ p 另请参见 <a href="https://github.com/apache/echarts/issues/17723#issuecomment-1268311307" target="blank">#17723</a> 及 <a href="https://cn.vuejs.org/api/reactivity-advanced.html#markraw" target="blank">Vue 文档中的相关使用警告</a>。
+
h3 ECharts 有哪些学习资料？
- p ECharts 相关项目及资源请参见 <a href="https://github.com/ecomfe/awesome-echarts">awesome-echarts</a>。
+ p ECharts 相关项目及资源请参见 <a href="https://github.com/ecomfe/awesome-echarts" target="blank">awesome-echarts</a>。
include ../components/inner-footer
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org