TestPlatfoming.git

			@@ -6,6 +6,140 @@
			<head>
			<title>Simple Surface</title>
			<meta charset="utf-8">
			<style type="text/css">
			/* 对 loading 整体布局*/
			.loading-wrapper {
			padding: 16px;
			background-color: rgba(0, 0, 0, 0.8);
			border-radius: 10px;
			color: #fff;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			background: rgba(0, 0, 0, 0.5);
			}


			/* loading 动画图像父级的布局 */
			.loading-view {
			height: 40px;
			position: relative;
			}

			.loading-msg {
			font-size: 14px;
			margin: 8px 0 0 0;
			position: relative;
			}

			.container1,
			.container2 {
			width: 40px;
			height: 40px;
			position: absolute;
			/* border: 1px solid #ff0000; */
			top: 0;
			left: 50%;
			margin-left: -20px;
			position: absolute;
			}

			.container2 {
			transform: rotate(45deg);
			}

			/* 第1种动画和第二种的相同部分，其中的 animation 也相同 */
			.circle,
			.bounce {
			width: 10px;
			height: 10px;
			background-color: #fff;
			border-radius: 50%;
			/* 设置小球动画 */
			animation: loading 1.2s both infinite;
			}

			.circle {
			position: absolute;
			}

			/* 设置小球的相对位置 */
			.circle1 {
			top: 0;
			left: 0;
			}

			.circle2 {
			top: 0;
			right: 0;
			}

			.circle3 {
			bottom: 0;
			right: 0;
			}

			.circle4 {
			bottom: 0;
			left: 0;
			}

			/* 设置延时 */
			.container1 .circle1 {
			animation-delay: 0s;
			}

			.container2 .circle1 {
			animation-delay: 0.2s;
			}

			.container1 .circle2 {
			animation-delay: 0.3s;
			}

			.container2 .circle2 {
			animation-delay: 0.4s;
			}

			.container1 .circle3 {
			animation-delay: 0.5s;
			}

			.container2 .circle3 {
			animation-delay: 0.6s;
			}

			.container1 .circle4 {
			animation-delay: 0.7s;
			}

			.container2 .circle5 {
			animation-delay: 0.8s;
			}

			@keyframes loading {
			0% {
			transform: scale(0);
			}

			40% {
			transform: scale(1);
			}

			80% {
			transform: scale(0);
			}

			100% {
			transform: scale(0);
			}
			}
			</style>
			<script src="echarts.min.js"></script>
			<script type="text/javascript">
			const color = ['#22448b'];
			@@ -37,12 +171,15 @@
			.chart {
			height: 100%;
			width: 25%;
			position: relative;
			}
			</style>
			</head>
			<body>
			<div id="container">
			<div id="chart0" class="chart"></div>
			<div id="chart0" class="chart">

			</div>
			<div id="chart1" class="chart"></div>
			<div id="chart2" class="chart"></div>
			<div id="chart3" class="chart"></div>
			@@ -75,9 +212,33 @@
			}
			]
			};
			var chart0 = echarts.init(dom0);
			var chart0 = null;
			function loading0(msg) {
			if (chart0 != null) {
			chart0.dispose();
			chart0 = null;
			}
			dom0.innerHTML = `<div class="loading-wrapper">
			<div class="loading-view">
			<div class="container1">
			<div class="circle circle1"></div>
			<div class="circle circle2"></div>
			<div class="circle circle3"></div>
			<div class="circle circle4"></div>
			</div>
			<div class="container2">
			<div class="circle circle1"></div>
			<div class="circle circle2"></div>
			<div class="circle circle3"></div>
			<div class="circle circle4"></div>
			</div>
			</div>
			<h2 class="loading-msg">${msg}</h2>
			</div>`
			}

			function drawChart0(fields, data) {
			chart0 = echarts.init(dom0);
			opt0.xAxis.data = fields;
			opt0.series[0].data = data;
			chart0.setOption(opt0);
			@@ -125,9 +286,33 @@
			}
			]
			};
			var chart1 = echarts.init(dom1);
			var chart1 = null;
			function loading1(msg) {
			if (chart1 != null) {
			chart1.dispose();
			chart1 = null;
			}
			dom1.innerHTML = `<div class="loading-wrapper">
			<div class="loading-view">
			<div class="container1">
			<div class="circle circle1"></div>
			<div class="circle circle2"></div>
			<div class="circle circle3"></div>
			<div class="circle circle4"></div>
			</div>
			<div class="container2">
			<div class="circle circle1"></div>
			<div class="circle circle2"></div>
			<div class="circle circle3"></div>
			<div class="circle circle4"></div>
			</div>
			</div>
			<h2 class="loading-msg">${msg}</h2>
			</div>`
			}

			function drawChart1(data) {
			chart1 = echarts.init(dom1);
			opt1.series[0].data = data;
			chart1.setOption(opt1);
			}
			@@ -175,9 +360,33 @@
			}
			]
			};
			var chart2 = echarts.init(dom2);
			var chart2 = null;
			function loading2(msg) {
			if (chart2 != null) {
			chart2.dispose();
			chart2 = null;
			}
			dom2.innerHTML = `<div class="loading-wrapper">
			<div class="loading-view">
			<div class="container1">
			<div class="circle circle1"></div>
			<div class="circle circle2"></div>
			<div class="circle circle3"></div>
			<div class="circle circle4"></div>
			</div>
			<div class="container2">
			<div class="circle circle1"></div>
			<div class="circle circle2"></div>
			<div class="circle circle3"></div>
			<div class="circle circle4"></div>
			</div>
			</div>
			<h2 class="loading-msg">${msg}</h2>
			</div>`
			}

			function drawChart2(label, names, data0, data1) {
			chart2 = echarts.init(dom2)
			opt2.xAxis.data = label;
			opt2.series[0].name = names[0];
			opt2.series[0].data = data0;
			@@ -242,9 +451,34 @@
			}
			]
			};
			var chart3 = echarts.init(dom3);
			var chart3 = null;

			function loading3(msg) {
			if (chart3 != null) {
			chart3.dispose();
			chart3 = null;
			}
			dom3.innerHTML = `<div class="loading-wrapper">
			<div class="loading-view">
			<div class="container1">
			<div class="circle circle1"></div>
			<div class="circle circle2"></div>
			<div class="circle circle3"></div>
			<div class="circle circle4"></div>
			</div>
			<div class="container2">
			<div class="circle circle1"></div>
			<div class="circle circle2"></div>
			<div class="circle circle3"></div>
			<div class="circle circle4"></div>
			</div>
			</div>
			<h2 class="loading-msg">${msg}</h2>
			</div>`
			}

			function drawChart3(label, data) {
			chart3 = echarts.init(dom3);
			opt3.yAxis.data = label;
			opt3.series[0].data = data;
			chart3.setOption(opt3);