WEB画面上にグラフを縦に複数並べたい

ブラウザのサイズに合わせて大きさが変わるグラフ(高さと横幅がある一定以上は小さくならない)を縦に複数並べて表示したいのですが、どのようにすればよいでしょうか。ご教示願います。

行数制限があるため一部削除しました。

追記
ブラウザのサイズをかなり小さくした場合にグラフの大きさが変になるのですが、何が問題でしょうか。ご教示願います。

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 50%"></div>
      <div id="container2" style="height: 50%"></div>
      <div id="container3" style="height: 50%"></div>
      <div id="container4" style="height: 50%"></div>
      <div id="container5" style="height: 50%"></div>
      <div id="container6" style="height: 50%"></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {}
    }]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
var dom2 = document.getElementById("container2");
var myChart2 = echarts.init(dom2);
var app2 = {};
option2 = null;
option2 = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {}
    }]
};
;
if (option2 && typeof option2 === "object") {
    myChart2.setOption(option2, true);
}
var dom3 = document.getElementById("container3");
var myChart3 = echarts.init(dom3);
var app3 = {};
option3 = null;
option3 = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {}
    }]
};
;
if (option3 && typeof option3 === "object") {
    myChart3.setOption(option3, true);
}

var dom4 = document.getElementById("container4");
var myChart4 = echarts.init(dom4);
var app4 = {};
option4 = null;
option4 = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {}
    }]
};
;
if (option4 && typeof option4 === "object") {
    myChart4.setOption(option4, true);
}
var dom5 = document.getElementById("container5");
var myChart5 = echarts.init(dom5);
var app5 = {};
option5 = null;
option5 = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {}
    }]
};
;
if (option5 && typeof option5 === "object") {
    myChart5.setOption(option5, true);
}
var dom6 = document.getElementById("container6");
var myChart6 = echarts.init(dom6);
var app6 = {};
option6 = null;
option6 = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {}
    }]
};
;
if (option6 && typeof option6 === "object") {
    myChart6.setOption(option6, true);
}
window.onresize = function () {
    if(window.innerWidth > 600 && window.innerHeight > 500){
      myChart.resize({
        width: window.innerWidth,
        height: window.innerHeight / 2,
        silent: false
      });
      myChart2.resize({
        width: window.innerWidth,
        height: window.innerHeight / 2,
        silent: false
      });
      myChart3.resize({
        width: window.innerWidth,
        height: window.innerHeight / 2,
        silent: false
      });
      myChart4.resize({
        width: window.innerWidth,
        height: window.innerHeight /2,
        silent: false
      });
      myChart5.resize({
        width: window.innerWidth,
        height: window.innerHeight / 2,
        silent: false
      });
      myChart6.resize({
        width: window.innerWidth,
        height: window.innerHeight /2,
        silent: false
      });
    }else if(window.innerWidth > 600 && window.innerHeight <= 500){
      myChart.resize({
        width: window.innerWidth,
        height: 250,
        silent: false
      });
      myChart2.resize({
        width: window.innerWidth,
        height: 250,
        silent: false
      });
      myChart3.resize({
        width: window.innerWidth,
        height: 250,
        silent: false
      });
      myChart4.resize({
        width: window.innerWidth,
        height: 250,
        silent: false
      });
      myChart5.resize({
        width: window.innerWidth,
        height: 250,
        silent: false
      });
      myChart6.resize({
        width: window.innerWidth,
        height: 250,
        silent: false
      });
    }else if(window.innerWidth <= 600 && window.innerHeight > 500){
      myChart.resize({
        width: 600,
        height: window.innerHeight / 2,
        silent: false
      });
      myChart2.resize({
        width: 600,
        height: window.innerHeight / 2,
        silent: false
      });
      myChart3.resize({
        width: 600,
        height: window.innerHeight / 2,
        silent: false
      });
      myChart4.resize({
        width: 600,
        height: window.innerHeight / 2,
        silent: false
      });
      myChart5.resize({
        width: 600,
        height: window.innerHeight / 2,
        silent: false
      });
      myChart6.resize({
        width: 600,
        height: window.innerHeight / 2,
        silent: false
      });
    }
};
       </script>
   </body>
</html>