Using dataZoom to scale a large amount of data in the echarts line chart does not work

Problem Description

For the vite+vue3+ts project, echarts displays a large amount of data using dataZoom for area zooming. Drag the red area in the above example, the data display does not change, and the area zooming function fails.

problem solved

Through the query, it is found that it is a problem of vue3.
Vue2 can define chart in data, but ref, reactive, etc. are provided in vue3.
When I encapsulated the echaert component, I used ref to define echarts in the setup, as follows:

const chart = ref();

Through online query, it is found that it is a problem of ref, which needs to be changed to shallowRef as follows:

const chart = shallowRef();

label

Ref is easy to understand. Objects created by using ref have properties and views of any depth in them that are responsive.
Unlike ref, when shallowRef modifies deep properties, the view will not be updated, because the ref method will recursively traverse all properties of the object. Make all properties responsive, so when the object is complex and large, too much monitoring will lead to performance loss, and there will be problems with echarts page rendering.