使用antdv里tabs组件时，各tabs里echarts组件不能正常显示？

Question

父组件在不同的tab里引用同一组件，只是传递参数不一样，代码：

 <a-tabs v-model:activeKey="activeKey" centered>
        <a-tab-pane key="kjsLine" tab="xAxis曲线">
            <Line :key="1" ref="drawkjsline" @getParamsNameByClick="getParamsNameByClick"></Line>
        </a-tab-pane>
        <a-tab-pane key="rcyl1Line" tab="xAxis1曲线">
            <Line
                :key="2"
                ref="drawrcyl1line"
                @getParamsNameByClick="getParamsNameByClick"
            ></Line>
        </a-tab-pane>
        <a-tab-pane key="rcylLine" tab="xAxis2曲线">
            <Line
                :key="3"
                ref="drawrcylline"
                @getParamsNameByClick="getParamsNameByClick"
            ></Line>
        </a-tab-pane>
    </a-tabs>

默认展示tab key为kjsLine的曲线，这是正常的，但key为rcyl1Line rcylLine 曲线在选择后显示的echarts不完整

<template>
    <div id="yywx" style="width: 100%; height: 350px; margin: auto"></div>
</template>
<script setup>
import * as echarts from 'echarts'
const emit = defineEmits(['getParamsNameByClick'])
//如果flag为1则需要click事件
async function yywxdrawLine(title, xData, yData, flag) {
    window.onload = function () {
        let element = document.getElementById('yywx')
        let width = element.clientWidth
    }
    let dom = document.getElementById('yywx')
    let myChart = echarts.init(dom)
    let option = {
        title: {
            text: title + '曲线' + '(' + xData[0] + '--' + xData[xData.length - 1] + ')',
            left: 'center',
            textAlign: 'auto',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#ddd',
                },
            },
            backgroundColor: 'rgba(255,255,255,1)',
            padding: [5, 10],
            textStyle: {
                color: '#7588E4',
            },
            extraCssText: 'box-shadow: 0 0 1px rgba(0,0,0,0.3)',
        },
        toolbox: {
            feature: {
                saveAsImage: {
                    type: 'png',
                    title: '保存为图片',
                },
            },
        },
        grid: {
            // 让图表占满容器
            top: '20%',
            left: '5%',
            right: '5%',
            bottom: '10%',
        },
        xAxis: {
            type: 'category',
            data: xData,
            boundaryGap: false,
            splitLine: {
                show: true,
                interval: 'auto',
                lineStyle: {
                    color: ['#D4DFF5'],
                },
            },
            splitLine: {
                //网格线
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                lineStyle: {
                    color: '#609ee9',
                },
            },
            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 14,
                },
            },
        },
        yAxis: {
            type: 'value',
            // splitLine: {
            //   lineStyle: {
            //     color: ["#D4DFF5"],
            //   },
            // },
            splitLine: {
                //网格线
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                lineStyle: {
                    color: '#609ee9',
                },
            },
            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 14,
                },
            },
            min: function (value) {
                //由于开井数与日产液量级不一样，为控制曲线波动，确定返回y轴最小值
                let res
                res = value.min < 10000 ? value.min - 30 : value.min - 1000
                res = value.min < 30 ? 0 : res.toFixed(1)
                return res
            },
        },
        series: [
            {
                name: title.split('）')[1],
                type: 'line',
                smooth: true,
                showSymbol: false,
                symbol: 'circle',
                symbolSize: 6,
                data: yData,
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(216, 244, 247,1)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(216, 244, 247,1)',
                                },
                            ],
                            false
                        ),
                    },
                },
                markLine: {
                    data: [{ type: 'average', name: 'Avg' }],
                },
                markPoint: {
                    data: [
                        { type: 'max', name: 'Max' },
                        { type: 'min', name: 'Min' },
                    ],
                    // color: "#d14a65",
                },
                itemStyle: {
                    normal: {
                        color: '#58c8da',
                    },
                },
                lineStyle: {
                    normal: {
                        width: 3,
                    },
                },
            },
        ],
    }
    dom.removeAttribute('_echarts_instance_')
    option && myChart.setOption(option)
    myChart.getZr().on('click', 'xAxis.category', function (params) {
        let rq = null
        //防止echarts折现图只能通过点击个点才能触发
        const pointInPixel = [params.offsetX, params.offsetY]
        if (myChart.containPixel('grid', pointInPixel)) {
            const xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [
                params.offsetX,
                params.offsetY,
            ])[0]
            //xIndex是横坐标点位
            rq = xData[xIndex]
        }
        if (flag == 1) {
            emit('getParamsNameByClick', rq, title)
        }
        return
    })
    window.addEventListener('resize', () => {
        myChart.resize()
    })
}

defineExpose({
    yywxdrawLine,
})
</script>