echarts 布局完成后出現(xiàn)大量空白

布局完成后出現(xiàn)大量空白

methods: {
        draw(name,id,data,unit,index,time){
          let myChart = echarts.init(document.getElementById(id));
          myChart.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              }
            },
            xAxis: [{
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              data: time
            }],
            yAxis: {
              type: 'value',
              name: name,
              position: 'left',
              axisLine: {
                lineStyle: {
                  color: this.color[index]
                }
              },
              axisLabel: {
                formatter: '{value}' + unit
              }
            },
            dataZoom: [{
              startValue: ''
            }, {
              type: 'inside'
            }],
            series: [{
              name: name,
              type: 'line',
              data: data
            }]
          });
        }
      },
      mounted() {
        for (let a = 1;a<7;a++){
          $("#main"+a).css( 'width', $("#main").width());
          $("#main"+a).css( 'height', $("#main").height());
          this.draw('水量','main'+a ,this.data,'ml',1,this.time);
        }

      }
      
      
      
.pic{
  padding-left:20px;
  padding-right:20px;
  height: 645px;
  display:flex;
  flex-wrap:wrap;
}
.pic div{
  width:33%;
  height:300px;
}





 <div class="pic">
          <div id="main1"></div>
          <div id="main2"></div>
          <div id="main3"></div>
          <div id="main4"></div>
          <div id="main5"></div>
          <div id="main6"></div>
        </div>
        <div>ndsnfakljsndf</div>