vue3 echarts resize自适应报错解决

* 不要用data去存储 echarts 实例，可能会报错 undefined ...type...

* 使用同一个resize监听事件

* 上代码实例

<template>
    <div ref="mychart" :style="{ width: '100%', height: '100%' }"></div>
</template>
  
<script>
import * as echarts from 'echarts';

let charts = {};
window.addEventListener('resize', () => {
    Object.values(charts).forEach((c) => {
        c.resize && c.resize();
    })
});
// node: {id:'xxx'}
export default {
    props: ['node'],
    mounted() {
        this.init();
    },
    unmounted() {
        delete charts[this.node.id];
    },
    methods: {
        init() {
            const chartDom = this.$refs.mychart;
            if (chartDom) {
                charts[this.node.id] = echarts.init(chartDom);
                charts[this.node.id].setOption({
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [820, 932, 901, 934, 1290, 1330, 1320],
                            type: 'line',
                            smooth: true
                        }
                    ]
                });
            }
        }
    }
}
</script>