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;
  wid