You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2021/01/05 03:05:44 UTC
[GitHub] [incubator-echarts] kawaiiz opened a new issue #13943: vue3.0下echarts resize()报错
kawaiiz opened a new issue #13943:
URL: https://github.com/apache/incubator-echarts/issues/13943
### Version
5.0.0
### Steps to reproduce
1.报错写法
```typescript
setup(props) {
const chartDom = ref<HTMLDivElement>();
const chart = ref<ECharts>();
const option = createOption(props.data);
console.log(option);
const resizeFn7 = () => {
chart.value!.resize();
};
const resizeChart = () => {
window.addEventListener("resize", resizeFn7);
};
const initComponent = () => {
chart.value = echarts.init(chartDom.value!) as any;
chart.value!.setOption(option, true);
resizeChart();
};
onMounted(() => {
initComponent();
});
onBeforeUnmount(() => {
window.removeEventListener("resize", resizeFn7);
});
return { chartDom };
},
```
报错信息：
[](https://postimg.cc/Yjmn6TdH)
```javascript
Uncaught TypeError: Cannot read property 'type' of undefined
at Object.reset (dataSample.js?fdde:104)
at Task.seriesTaskReset [as _reset] (Scheduler.js?69ff:478)
at reset (task.js?f47d:232)
at Task.taskProto.perform (task.js?f47d:129)
at eval (Scheduler.js?69ff:294)
at HashMap.each (util.js?1ee1:669)
at eval (Scheduler.js?69ff:278)
at Array.forEach (<anonymous>)
at each (util.js?1ee1:300)
at performStageTasks (Scheduler.js?69ff:247)
```
2.不报错写法
```typescript
setup(props) {
const chartDom = ref<HTMLDivElement>();
let chart: ECharts | null = null;
const option = createOption(props.data);
console.log(option);
const resizeFn7 = () => {
chart!.resize();
};
const resizeChart = () => {
window.addEventListener("resize", resizeFn7);
};
const initComponent = () => {
chart = echarts.init(chartDom.value!) as any;
chart!.setOption(option, true);
resizeChart();
};
onMounted(() => {
initComponent();
});
onBeforeUnmount(() => {
window.removeEventListener("resize", resizeFn7);
});
return { chartDom };
},
```
### What is expected?
vue3.0的ref存储echarts实例，resize不会报错
### What is actually happening?
当使用vue3.0的ref去存储echarts实例时，饼图可以resize()，但是折线图和柱图，发生报错，不使用ref存储则不会出现这种问题。
---
我这里用的4.9.0版本，但是5.0.0的我也尝试了，一样会报错。
<!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE -->
<!-- This issue is in English. DO NOT REMOVE -->
----------------------------------------------------------------
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.
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
[GitHub] [incubator-echarts] pissang commented on issue #13943: vue3.0下echarts resize()报错
Posted by GitBox <gi...@apache.org>.
pissang commented on issue #13943:
URL: https://github.com/apache/incubator-echarts/issues/13943#issuecomment-755301987
@kawaiiz 看了下可能是因为 Proxy 应用到了整个 ECharts 实例上的问题，不太建议把整个 ECharts 实例这样的对象放到 ref 里，容易影响到实例底层的运行。可以使用 shallowRef 替代，这样 Proxy 不会应用到 ECharts 实例底下的各个属性上。
```ts
const chartDom = ref();
const chart = shallowRef();
```
----------------------------------------------------------------
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.
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
[GitHub] [incubator-echarts] kawaiiz commented on issue #13943: vue3.0下echarts resize()报错
Posted by GitBox <gi...@apache.org>.
kawaiiz commented on issue #13943:
URL: https://github.com/apache/incubator-echarts/issues/13943#issuecomment-754374248
> @kawaiiz 可以发我们下完整的例子么
https://codesandbox.io/s/fancy-butterfly-f259t?file=/src/App.vue
----------------------------------------------------------------
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.
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
[GitHub] [incubator-echarts] pissang commented on issue #13943: vue3.0下echarts resize()报错
Posted by GitBox <gi...@apache.org>.
pissang commented on issue #13943:
URL: https://github.com/apache/incubator-echarts/issues/13943#issuecomment-754359810
@kawaiiz 可以发我们下完整的例子么
----------------------------------------------------------------
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.
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
[GitHub] [incubator-echarts] echarts-bot[bot] commented on issue #13943: vue3.0下echarts resize()报错
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #13943:
URL: https://github.com/apache/incubator-echarts/issues/13943#issuecomment-754358979
Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.
In the meanwhile, please make sure that **you have posted enough image to demo your request**. You may also check out the [API](http://echarts.apache.org/api.html) and [chart option](http://echarts.apache.org/option.html) to get the answer.
If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.
If you are interested in the project, you may also subscribe our [mailing list](https://echarts.apache.org/en/maillist.html).
Have a nice day! 🍵
----------------------------------------------------------------
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.
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
[GitHub] [incubator-echarts] pissang edited a comment on issue #13943: vue3.0下echarts resize()报错
Posted by GitBox <gi...@apache.org>.
pissang edited a comment on issue #13943:
URL: https://github.com/apache/incubator-echarts/issues/13943#issuecomment-755301987
@kawaiiz 看了下可能是因为 Proxy 应用到了整个 ECharts 实例上的问题，不太建议把整个 ECharts 实例这样的对象放到 ref 里，容易影响到实例底层的运行。可以使用 shallowRef 替代，这样 Proxy 不会应用到 ECharts 实例底下的各个属性上。
```ts
const chartDom = shallowRef();
const chart = shallowRef();
```
----------------------------------------------------------------
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.
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