vue使用element-ui tabs切换echarts解决宽度100%方式

<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="学生实习统计" name="1">
            <xiaobear-bar-chart ref="child" v-if="activeName==='1'"/>
        </el-tab-pane>
        <el-tab-pane label="学生周记统计" name="2">
            <xiaobear-pie-chart ref="second" v-if="activeName==='2'"/>
        </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  export default {
    name: "IncomeStatistics",
    data() {
      return {
        activeName: '1', //当前激活的标签页
      };
    },
    methods: {
      //切换标签页时触发
      handleClick(tab, event) {
        this.activeName = tab.name;
      },
    }
  }
</script> 

methods:{
    handleClick(tab, event) {
      if (tab.name === 'second') {
        this.$nextTick(() => {
          this.$refs.second.chart.resize()
        })
      }
    },
}

<el-tab-pane :laze="true">
    <ToexamineLine ref="child"/>
</el-tab-pane>

<el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="电厂" name="dc" >
        <div :id="'myChart1'" style="width:100%;height:160%;"></div>
    </el-tab-pane>
    <el-tab-pane label="变电站" name="bdz" >
        <div :id="'myChart2'" style="width:100%;height:160%;"></div>
    </el-tab-pane>
</el-tabs>

methods: {
initChart1() {
        this.chart1 = echarts.init(document.getElementById("myChart1"));
        var option = {
          //内容省略
        };
        this.gsList = [];
        this.dsList = [];
        this.chart1.setOption(option, true)
      },
      initChart2() {
        this.chart2 = echarts.init(document.getElementById("myChart2"));
        var option = {
          //内容省略
        };
        this.gsList = [];
        this.dsList = [];
        this.chart2.setOption(option, true)
      },
    //标签页
      handleClick(tab, event) {
        this.activeName == tab.name;
        if(this.activeName == 'dc'){
          this.queryForm.type = 'dc'
          this.getList()
        }else if(this.activeName == 'bdz'){
          this.queryForm.type = 'bdz'
          this.getList()
        }
      },
     getList(){
        //图
        if(this.activeName == 'dc'){
          getDwgs(this.queryForm).then((res) => {
            this.echartsList = res.list
            for(let i=0;this.echartsList.length>i;i++){
              this.dsList.push(this.echartsList[i].ds)
              this.gsList.push(this.echartsList[i].gs)
            }
            this.$nextTick(() => {
              this.initChart1()
            })
          })
        }else if(this.activeName == 'bdz'){
          getDwgs(this.queryForm).then((res) => {
            this.echartsList = res.list
            for(let i=0;this.echartsList.length>i;i++){
              this.dsList.push(this.echartsList[i].ds)
              this.gsList.push(this.echartsList[i].gs)
            }
            this.$nextTick(() => {
              this.initChart2()
            })
          })
        }
      },
}