ASRS-3D.git - Gitblit

			@@ -17,6 +17,58 @@
			canvas {
			display: block;
			}
			#btn1 {
			background-color: #4CAF50; /* Green */
			border: none;
			color: white;
			padding: 15px 32px;
			text-align: center;
			text-decoration: none;
			display: inline;
			font-size: 16px;
			position: absolute;
			left: 1500px;
			}
			#btn2 {
			position: absolute;
			top: 45%;
			left: 100%;
			transform: translateY(50%);
			width: 10%;
			height: 10%;
			background: rgba(255,255,255,0.3);
			border: none;
			color: white;
			/padding: 15px 32px;/
			text-align: center;
			text-decoration: none;
			/display: none;/
			font-size: 16px;
			border-radius: 0px 5px 5px 0px;
			}
			#btn2_m{
			position: absolute;
			top: 45%;
			left: 100%;
			transform: translateY(50%);
			width: 10%;
			height: 10%;
			border-radius: 0px 5px 5px 0px;
			background: rgba(143, 200, 227, 0.2);
			backdrop-filter: blur(1px);
			}
			#maoboli {
			position: absolute;
			top: 50%;
			left: 1%;
			transform: translateY(-50%);
			width: 20%;
			height: 95%;
			background: rgba(143, 200, 227, 0.2);
			border-radius: 5px;
			backdrop-filter: blur(1px);
			/display: none;/
			}
			#sidebar{
			display: none;
			/定位/
			@@ -30,34 +82,37 @@
			background: rgba(255,255,255,0.3);
			border-radius: 5px;
			color: #ffffff;
			/display: none;/
			}
			#sidebar p1{
			height: 24px;
			font-family: FZChaoCuHei-M10S;
			font-weight: bold;
			font-weight: 900;
			font-size: 24px;
			text-indent: 2.5%;
			letter-spacing:1px;
			line-height: 25px;
			margin-top: 15px;
			margin-left: 2.5%;
			display: block;
			}
			#sidebar p2{
			height: 10px;
			font-size: 5px;
			font-family: FZChaoCuHei-M10S;
			font-weight: bold;
			text-indent: 2.5%;
			letter-spacing:2px;
			font-weight: 400;
			letter-spacing:1px;
			line-height: 8px;
			margin-top: 7px;
			transform: scale(0.8,0.8);
			}

			#baobiao1{
			width: 99%;
			height: 260px;
			height: 280px;
			}
			#baobiao2 {
			width: 99%;
			height: 260px;
			height: 280px;
			}
			.tablebox {
			height: 25%;
			@@ -91,14 +146,14 @@
			text-align: center;
			}
			.tablebox table tr th {
			background-color: rgba(255,255,255,0.3);
			background-color: rgba(136,176,226,1);
			cursor: pointer;
			}
			.tablebox table tr td {
			background-color: transparent;
			}
			.tbl-body tr:nth-child(even) td,.tbl-body1 tr:nth-child(even) td {
			background-color: rgba(214, 214, 224, 0.5);
			background-color: rgba(136, 176, 226, 0.4);
			}
			.tablebox table tr td span,
			.tablebox table tr td span {
			@@ -110,14 +165,17 @@
			<script type="text/javascript" src="../static/js/lib/jquery-3.3.1.min.js"></script>
			</head>
			<body style="position: relative">
			<div id="maoboli"></div>
			<button id="btn1" onclick="btn1()">展开</button>
			<div id="sidebar">
			<!-- <h1>中扬-立体仓库</h1>-->
			<p1>广州市-广州塔商圈</p1>
			<p2>ZhongYang Automated warehouse</p2>
			<p1>中扬-智能立体仓库</p1>
			<p2>ZhongYang Intelligent Three-Dimensional Warehouse</p2>
			<div id="baobiao1"></div>
			<div id="baobiao2"></div>
			<div class="tablebox">
			<div id="btn2_m"></div>
			<button id="btn2" onclick="btn2()">隐藏</button>

			<div class="tablebox">
			<div class="tbl-header">
			<table border="0" cellspacing="0" cellpadding="0" >
			<thead>
			@@ -131,7 +189,6 @@
			<tbody style="opacity:0;" ></tbody>
			</table>
			</div>

			<div class="tbl-body">
			<table border="0" cellspacing="0" cellpadding="0">
			<thead>
			@@ -261,12 +318,18 @@
			option1 = {
			title: {
			text: '年度进/出货量',
			x:'5px',
			y:'15px',
			textStyle:{
			color:'#F8F8FF',
			color:'#ffffff',
			fontWeight:400,
			fontSize: 10,
			},
			subtext: 'Data',
			subtextStyle:{
			color:'#F8F8FF',
			align:'center',
			color:'#ffffff',
			fontSize: 7,
			},
			show: true,

			@@ -275,14 +338,8 @@
			trigger: 'axis'
			},
			textStyle:{
			color:'#F8F8FF',
			color:'#f5f4f4',
			},
			// subtextStyle:{
			// color:'#F8F8FF',
			// },
			// tooltip: {
			// trigger: 'axis'
			// },
			legend: {
			show:false,
			data: ['进货', '出货']
			@@ -303,8 +360,12 @@
			type: 'category',
			axisTick:{
			show:false,
			lineStyle:{
			color:'#000'
			}
			},
			axisLabel: { // 如果这个字段不设置，echarts会根据屏宽及横坐标数据自动给出间隔
			fontSize:9,
			interval: 1, // 间隔长度，可自定义（如果是时间格式，echarts会自动处理）
			rotate: 0 ,// 横坐标上label的倾斜度
			textStyle: {
			@@ -313,55 +374,45 @@
			},
			axisLine:{
			lineStyle: {
			color: '#fff',
			// width: 8,
			color: '#e2e1e1',// x轴刻度线的颜色
			}},
			// prettier-ignore
			data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
			}
			],
			yAxis: [
			{
			// show:false,
			type: 'value',
			offset: -4,
			// interval: 35
			axisTick:{
			show:false,
			},
			axisLabel: {
			fontSize:9,
			},
			splitLine:{
			lineStyle:{
			color:'#cdcdcd'// y轴分割线颜色
			}
			}

			}
			],
			series: [
			{
			color:['#F8F8FF'],
			color:['#88b0e2'],
			name: '进货',
			type: 'bar',
			data: [
			204.5, 65.5, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
			204.5, 50.5, 15.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
			],
			// markPoint: {
			// data: [
			// { type: 'max', name: 'Max' },
			// { type: 'min', name: 'Min' }
			// ]
			// },
			// markLine: {
			// data: [{ type: 'average', name: 'Avg' }]
			// }
			},
			{
			color:['#C0C0C0'],
			color:['#f8f7f7'],
			name: '出货',
			type: 'bar',
			data: [
			210, 72.2, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
			100, 75.2, 33.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
			],
			// markPoint: {
			// data: [
			// { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
			// { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
			// ]
			// },
			// markLine: {
			// data: [{ type: 'average', name: 'Avg' }]
			// }
			}
			],

			@@ -386,10 +437,13 @@
			}
			},
			title: {
			left: 'left',
			x:'5px',
			y:'15px',
			text: '销售件数',
			textStyle:{
			color:'#F8F8FF',
			color:'#ffffff',
			fontWeight:400,
			fontSize: 10,
			},
			},
			toolbox: {
			@@ -402,13 +456,41 @@
			saveAsImage: {}
			}
			},
			textStyle:{
			color:'#f5f4f4',
			},
			xAxis: {
			type: 'time',
			boundaryGap: false
			boundaryGap: false,
			axisTick:{
			show:false,
			},
			axisLabel: { // 如果这个字段不设置，echarts会根据屏宽及横坐标数据自动给出间隔
			fontSize:9,
			interval: 1, // 间隔长度，可自定义（如果是时间格式，echarts会自动处理）
			rotate: 0 ,// 横坐标上label的倾斜度
			textStyle: {
			color:'#fff'
			}
			},
			axisLine:{
			lineStyle: {
			color: '#e2e1e1',// x轴刻度线的颜色
			}},

			},

			yAxis: {
			type: 'value',
			boundaryGap: [0, '100%']
			boundaryGap: [0, '100%'],
			axisLabel: {
			fontSize:9,
			},
			splitLine:{
			lineStyle:{
			color:'#cdcdcd'// y轴分割线颜色
			}
			}
			},
			dataZoom: [
			{
			@@ -427,7 +509,20 @@
			type: 'line',
			smooth: true,
			symbol: 'none',
			areaStyle: {},
			areaStyle: {
			normal: {
			color: '#88b0e2' //改变区域颜色
			}
			},
			itemStyle : {
			normal : {
			color:'#dddede', //改变折线点的颜色
			lineStyle:{
			// color:'#8cd5c2' //改变折线颜色
			width:0.5,
			}
			}
			},
			data: data
			}
			]
			@@ -464,5 +559,20 @@


			</script>
			<script>
			function btn1() {
			$('#sidebar').show(300);
			$('#maoboli').show(300);
			// $('#btn1').hide(300);
			$('#btn2').show(300);
			}
			function btn2() {
			$('#sidebar').hide(300);
			$('#maoboli').hide(300);
			// $('#btn2').hide(300);
			// $('#btn1').show(300);

			}
			</script>
			</body>
			</html>