How to solve the adaptive problem when tab switches to display echarts charts? - Codes Helper

the parent component uses the tab of elementUI to put several tab pages (specific ones are determined according to the data). In the child component, it is impossible to make the echarts chart adapt to the browser page size by setting width:100% to the echarts box, and set the resize (), of echarts by listening for page changes, but only one of several tab pages can adapt, the other is the initial value, why? How do I modify it?
parent component HTML code:

<el-tabs type="border-card" v-model="selectedTab" @tab-click="handleClick">
          <el-tab-pane v-for="(item, index) in analysisData" :key="index" :label="item.typeName" :name="index+""">
            <v-scatter :chartsData.sync="item" v-if="item.type == 10"></v-scatter>
            <v-line :chartsData.sync="item" v-else-if="item.type == 11"></v-line>
            <v-bar :chartsData.sync="item" v-else></v-bar>
</el-tab-pane>

Sub-component HTML Code:

<template>
  <div class="chartBox">
    <div :id="chartsData.chartId" :style="chartBox"></div>
  </div>
</template>

subcomponent js code

export default {
    props: ["chartsData"],
    data(){
      return {
        chartWidth : `${document.documentElement.clientWidth}`,
        myChart: null,
        legendData:[],
        xData:[],
        seriesData: [],
        symbolSize:8
      }
    },
    computed:{
      chartBox(){
        return {width:this.chartWidth-300 + "px",height:"550px"}
      }
    },
    watch: {
      chartsData: {
        handler(newVal, oldVal){
          if(this.myChart){
            this.legendData = []
            this.seriesData = []
            this.xData = []
          }
          this.dealData()
        }
      },
    },
    mounted(){
      // echarts
      let mychart = document.getElementById(this.chartsData.chartId);
      this.myChart = this.$echarts.init(mychart)//initecharts
      this.dealData()

      //echarts
      const that = this
      window.onresize = () => {
        if(document.body.clientWidth > 1000){
          let screenWidth = document.body.clientWidth - 300
          that.chartWidth = screenWidth
          that.myChart.resize({width:screenWidth});
        }
      }
    },
    methods: {
      dealData(){
        if(this.chartsData){//
          if(this.chartsData.result){//Result,
            this.chartsData.result.forEach((item, index) => {
              // this.legendData.push(item.name)
              let name = ""  //item
              let color = ""  //
              if(item.name == "work_day_exclude_friday"){
                name = ""
                color = "green"
                this.legendData.push(name)
              }
              if(item.name == "friday_saturday_sunday"){
                name = ""
                color = "black"
                this.legendData.push(name)
              }
              if(item.name == "holiday"){
                name = ""
                color = "red"
                this.legendData.push(name)
              }
              if(item.result.length){
                //
                let itemData = []
                for(var i = 0; i < item.result.length; iPP){
                  itemData.push(item.result[i].value)
                  if(index == this.chartsData.result.length-1){
                    this.xData.push(item.result[i].label)
                  }
                }
                let seriesItem = {
                  name: name,
                  type: "line",
                  symbolSize:this.symbolSize,
                  color: color,
                  data: itemData
                }
                this.seriesData.push(seriesItem)
              }
            })
          }
          if(this.chartsData.avg){//avg,
            this.chartsData.avg.forEach((item, index) => {
              // this.legendData.push(item.name)
              let name = ""
              let color = ""  //()
              if(item.name == "work_day_exclude_friday"){
                name = ""
                color = "green"
                this.legendData.push(name)
              }
              if(item.name == "friday_saturday_sunday"){
                name = ""
                color = "black"
                this.legendData.push(name)
              }
              if(item.name == "holiday"){
                name = ""
                color = "red"
                this.legendData.push(name)
              }
              if(item.result.length){
                //
                let itemData = []
                for(var i = 0; i < item.result.length; iPP){
                  itemData.push(item.result[i].value)
                }
                let seriesItem = {
                  name: name,
                  type: "line",
                  symbol: "circle",
                  symbolSize:this.symbolSize,
                  color: color,
                  data: itemData,
                }
                this.seriesData.push(seriesItem)
              }
            })
          }
          this.drawLine()
        }else{
          this.$message("")
        }
      },
      // 
      drawLine(){
        this.myChart.setOption({
          title: {
            text: this.chartsData.typeName,
          },
          legend: {
            align: "left",
            left: 150,
            data: this.legendData,
          },
          tooltip : {
            trigger: "item",
            formatter : function (params) {
              return params.seriesName + "<br/>" + params.name + ":" + params.value
            }
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: this.xData
          },
          yAxis: {
            type: "value"
          },
          series: this.seriesData
        })
      }
    }
  }

this window.onresize only works in one sub-component, and the resize. of this page will not be executed in other components.
Please answer your questions