Vue 3 的hooks，实现了 ECharts 折线图实例的初始化、重置大小和销毁等功能。

https://echarts.apache.org/examples/zh/editor.html?c=line-stack数据参考官网
引入了 ECharts 库和 Vue 3 中的一些 Hooks 和方法。
定义了一个名为 useEcharts 的自定义 Hook，用来管理 ECharts 实例的初始化、更新和销毁。
在 useEcharts 中，利用 Vue 3 的生命周期钩子函数和响应式数据，实现了 ECharts 实例的初始化、重置大小和销毁等功能。
最后通过 return 返回了一些可以在组件中使用的属性和方法，包括 chartRef、state 对象的响应式属性、以及 echartsResizeFun 方法。

import * as echarts from 'echarts';
import { ref, reactive, toRefs, onMounted, onBeforeUnmount, onActivated, watch, nextTick } from 'vue';

function useEcharts(params) {
    const { props, option } = params;
    const chartRef = ref();
    
    const state = reactive({
        chart: null,
        nvll: ['', null, undefined],
    });

    onMounted(() => {
        window.addEventListener('resize', echartsResizeFun);
    });

    onActivated(() => {
        echartsResizeFun();
    });
    // 监听初始化
    watch(() => [props.data, props.theme], () => {
        nextTick(() => {
            initChart();
        });
    }, { deep: true, immediate: true });

    function initChart() {
        if (state.nvll.indexOf(state.chart) === -1) state.chart.dispose();
         // 获取实例时，记得使用markRaw返回实例本身
        // 参数1：容器ref值，参数2：主题
        state.chart = markRaw(echarts.init(chartRef.value, props.theme));
        
        state.chart.setOption(option);
    }
    // 重置大小
    function echartsResizeFun() {
        state.chart && state.chart.resize();
    }

    onBeforeUnmount(() => {
        window.removeEventListener('resize', echartsResizeFun);
        if (state.chart) {
            state.chart.dispose();
            state.chart = null;
        }
    });

    return {
        chartRef,
        ...toRefs(state),
        echartsResizeFun,
    };
}

export default useEcharts; // import useEcharts from '@/src/hooks/useEcharts';
export { useEcharts }; // import {useEcharts} from '@/src/hooks/useEcharts';