ECharts 使用时控制台报错 `resize` should not be called during main process

---

此情况可能会出现在 ECharts 与 Vue 3 结合使用的场景下，尤其是将 ECharts 实例使用 ref 包装之后。

本文节选自本人另一篇博文 Vue 3 开发中的 ECharts 5 使用

---

1. 问题分析

一般情况下，对 ECharts 图表封装并不需要将 echarts 对象暴露到渲染上下文中。如果确实有意将 echarts 对象声明为响应式，请使用 shallowRef 而非 ref：

// GOOD
const chart = shallowRef<echarts.ECharts>(); 

// BAD
const chart = ref<echarts.ECharts>();

如果不使用 shallowRef，可能会导致命令行报错 `resize` should not be called during main process；事实上，任何第三方库创造的实例都应当使用 shallowRef 而非 ref 进行响应式处理。

---

2. 参考链接

• Github echarts issue - resize error
• Vue V3 Doc - ref
• Vue V3 Doc - shallowRef