小程序swiper-item里面用echarts

一个页面有七个折线图，一屏放不下，下面部分看不到，想知道怎么解决。

    <swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">
        <swiper-item>
                <view class="container">
                    <ec-canvas id="mychart-dom-line1" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
                    <ec-canvas id="mychart-dom-line2" canvas-id="mychart-line" ec="{{ ec2 }}"></ec-canvas>
                    <ec-canvas id="mychart-dom-line3" canvas-id="mychart-line" ec="{{ ec3 }}"></ec-canvas>
                    <ec-canvas id="mychart-dom-line4" canvas-id="mychart-line" ec="{{ ec4 }}"></ec-canvas>
                    <ec-canvas id="mychart-dom-line5" canvas-id="mychart-line" ec="{{ ec5 }}"></ec-canvas>
                    <ec-canvas id="mychart-dom-line6" canvas-id="mychart-line" ec="{{ ec6 }}"></ec-canvas>
                    <ec-canvas id="mychart-dom-line7" canvas-id="mychart-line" ec="{{ ec7 }}"></ec-canvas>
            </view>
        </swiper-item>
    </swiper>

ec-canvas {
  width: 100%;
  height: 400rpx;
  position: relative;
  top: -174rpx;
}


  .container{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column; 
    justify-content: flex-start;
  }
.tab-box{
  padding-top: 80rpx;
  height: 100%;
  box-sizing: border-box;
}

.container添加overflow-y: auto