VUE中echart自适应外部div大小

父组件：(因为要做动画效果，父组件要放大且居中，最开始时为了自适应全部都是用的是百分比)

html：

<div ref="testDiv" class="rectangle1" @click="getchange()"><hotline-distric ref="hotlineDiv"></hotline-distric></div>

js:

getchange(){
  this.$refs['testDiv'].classList.toggle("classStyle2");
  this.$refs['testDiv'].classList.toggle("classStyle3");
  console.log("hhhh");
  setTimeout(()=>{
    this.$refs['hotlineDiv'].echarts1.resize();（子组件定义一个变量，绘制echart图标时，使用此变量来绘制，就可以Resize）
  },600);

 可以使用setInterval 或者循环使用setTime来减小时间间隔，使绘制的图像和外面div看起来没有那么突兀，也是有幅度的在变化
}

css:

.rectangle1 {
  position: absolute;
  width: 32.7%;
  height: 41.5%;
  -webkit-transition:all 0.6s ease-in-out;
}

.classStyle2{
  -webkit-transform:translate(50px,20px);
}

.classStyle3{
  width: 60.7%;
  height: 80.5%;
}

子组件：

html:

<div id="hotLine" ref="hotLine" v-if="setUpInfo.isDisplay === 0">
  <div class="hotLine-top">
    <div id="hotLine-title" >
      <!--v-if="isTrue === false"-->//其他额外的地方
      区县热线办理情况
    </div>
  </div>


  <div class="hotLine-bottom">
    <div id="hotLine-year">//绘制图表的地方 

    </div>
  </div>

js:

data() {
  return {
    echarts1:{},

  }
},

methods: {
   
   

drawYearCharts: function () {
  // 基于准备好的dom，初始化echarts实例
  this.echarts1 = this.$echarts.init(document.getElementById('hotLine-year'));
  this.echarts1.setOption(option2);//使用定义的变量来绘制
},}

css:

#hotLine-year {
  width: 49%;
  height: 100%;
  display: inline-block;
}