When using ecarts, the console reports an error ` resize ` should not be called during main process

This situation may occur in the scenario where echarts is used in combination with Vue 3, especially after the echarts instance is wrapped with Ref.

This article is excerpted from another blog post, the use of echarts 5 in the development of Vue 3

1. Problem analysis

In general, the encapsulation of ecarts chart does not need to expose the ecarts object to the rendering context. If you do intend to declare an echots object as a response, use shallowref instead of ref:

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

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

If you do not use shallowref, the command line may report an error ‘resize’ should not be called during main process; In fact, any instance created by a third-party library should be processed responsively using shallowref instead of ref.