echarts不同按钮切换不同图表

父页面上有一个echarts，子页面封装了一个echarts，通过两个按钮切换不同的图表。
在网上搜了很久，也没有搜到自己想要的。不是同一个图表更换数据源，而是就是两个不同的图表切换。
遇到的问题是第一个切换到第二个的时候，第二个只有100px左右大小，或者第二个页面上半截空了一大片，下半截才是图表。
或者第二个切换回来第一个不显示或者都在第一个页面上显示。
因为一边百度一边调试，整整花了一天时间，才搞正常。
现在回过头想一想，还是自己写的不对，导致一直都不对。

父页面：

<template>
  <div class="wholeTotal">
    <div style="width:100%;height: 95%" v-if="echartsFlag == 0">
      <div id="anaysisEcharts" style="width: 100%; height: 95%"></div>
    </div>
    <div class="totalButton">
      <a-button @click="apiCountRef()" class="apiButton" :class="{ active: echartsFlag == 0 }">接口数量</a-button>
      <a-button @click="cashAmountRef()" class="apiButton" :class="{ active: echartsFlag == 1 }">金额</a-button>
    </div>
     <cash-amount-modules ref="cashAmountRef" v-if="echartsFlag == 1" />
      </div>  
      </template>

data中 echartsFlag: 0,
方法中当从第二个页面切换回第一个页面时，要刷新第一个图表相关的方法，这个比较重要！！！！

 apiCountRef() {
      this.echartsFlag = 0
      this.$nextTick(() => {
        this.initEaharts()
        this.initData()
        let that = this
        window.onresize = function() {
          that.echart.resize()
        }
      })
    },
    cashAmountRef() {
      this.echartsFlag = 1
     
    },

.wholeTotal {
  width: 100%;
  height: 100%;
  .totalButton {
    width: 240px;
    position: absolute;
    bottom: 40px;
    right: 80px;
    .apiButton {
      width: 100px;
      margin-right: 10px;
      color: #fff;
      font-size: 15px;
      font-weight: 700;
      background: #aaaaaa;
      &:hover {
        background: #4373b9;
      }
    }
  }
  .active {
    background: #4373b9 !important;
  }
}

子组件，注意子组件的根div类名一定不要和父组件的有重复的，我在这里也跌了坑，花了一个小时才发现类名重复了，导致样式显示不正常

<template>
  <!-- 金额 -->
  <div class="Cashcontent">
    <div id="cashEcharts" class="apiamount"></div>
    </div>
</template>

.Cashcontent {
  width: 100vw;
  height: calc(100vh - 35px);
  .apiamount {
    width: 100%;
    height: 95%;
  }
}