JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html style="height: 100%">
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
		<style>
		.custom-select-lg {
			border: 2px solid #ccc;
			height: 52px;
			padding: 0 0 0 15px;
			font-size: 125%;
			width: 290px;
		}
		.vh-100 {
		  min-height: 100vh;
		}

		.choose-plot {
		  padding-top: 15px;
		  padding-bottom: 15px;
		}

		.bordered {
		  border: 1px solid #ccc;
		  border-radius: 10px;
		}
		</style>
	</head>
	<body>
		<div class="container-fluid d-flex h-100 flex-column vh-100">
			<div class="row">
				<div class="col choose-plot">
				<strong class="mb-2">Instruction here</strong>
					<div class="row">
					  <div class="col-1">
						<button id="load_plot" class="btn btn-primary btn-lg">Load plot</button>
					  </div>
					</div>
				</div>
			</div>

			<div class="row flex-fill d-flex justify-content-start">
				<div class="col-6 bordered">1 of 4
                    <div id="container-0" ></div>
                </div>
				<div class="col-6 bordered">2 of 4
                    <div id="container-1"></div>
                </div>
				<div class="col-6 bordered">3 of 4
                    <div id="container-2"></div>
                </div>
				<div class="col-6 bordered">4 of 4
                    <div id="container-3""></div>
                </div>
			</div>
		</div>
    		<script  src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js" integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.js"></script>
  ...

CSS

.col-6.bordered > div {
    height: 50vh;
}

JavaScript

var doms = [
		    document.getElementById("container-0"),
		    document.getElementById("container-1"),
            document.getElementById("container-2"),
            document.getElementById("container-3"),
        ];
		var myCharts = [];
		var myOption = {
            tooltip : {
                trigger: 'axis',
                axisPointer : {
                    type : 'shadow'
                }
            },
            legend: {
                data: ['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis:  {
                type: 'category',
                data: ['周一','周二','周三','周四','周五','周六','周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '直接访问',
                    type: 'bar',
                    stack: 'a',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: [320, 302, 301, 334, 390, 330, 320]
                },
                {
                    name: '邮件营销',
                    type: 'bar',
                    stack: 'a',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '联盟广告',
                    type: 'bar',
                    stack: 'a',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
      ...