小程序使用echarts页面显示问题

要在一个页面显示七个折线图，但是是这种效果，不知道要怎么改

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

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

            <view class="head">
                <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>
            </view>

给每个mychart-dom-line加个宽高试试。再给container加个高度，可能是高度不够挤在一起了