TV.kanbanUI.git

			@@ -5,7 +5,7 @@
			<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1.0">
			<meta http-equiv="X-UA-Compatible" content="ie=edge">
			<title>韩电生产计划看板</title>
			<title>生产计划看板</title>
			<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
			<link rel="stylesheet" type="text/css" href="css/bootstrap-table.min.css">
			<link rel="stylesheet" type="text/css" href="css/index.css">
			@@ -17,7 +17,8 @@
			<script src="js/jquery.SuperSlide.2.1.3.js"></script>
			<script src='js/template.js'></script>
			<script src="js/jquery.qrcode.min.js"></script>
			<style>
			<script src="js/webConfig.js"></script>
			<style>
			.clock {
			font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
			font-size: 20px;
			@@ -27,41 +28,37 @@
			margin-top: -75px;
			margin-right: 5px;
			color: #09d1ea;

			}

			.clock #Date {
			text-align: center;
			text-shadow: 0 0 0px #00c6ff;


			}

			.clock ul {
			width: 450px;
			margin: 0 auto;
			padding: 0px;
			list-style: none;
			text-align: right;
			margin-left: 15px;
			position: relative;
			}

			.clock ul li {
			display: inline;
			font-size: 24px;
			text-align: left;
			font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
			text-shadow: 0 0 0px #00c6ff;
			}


			.clock #Date {
			text-align: center;
			text-shadow: 0 0 0px #00c6ff;
			}

			.clock ul {
			width: 450px;
			margin: 0 auto;
			padding: 0px;
			list-style: none;
			text-align: right;
			margin-left: 15px;
			position: relative;
			}

			.clock ul li {
			display: inline;
			font-size: 24px;
			text-align: left;
			font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
			text-shadow: 0 0 0px #00c6ff;
			}

			body {
			padding-left: 50px;
			padding-right: 50px;
			}


			.title {

			font-size: 44px;
			font-family: PingFangSC;
			font-weight: 500;
			@@ -70,99 +67,127 @@
			background: url(img/img_little_new.png) center no-repeat;
			margin-bottom: 30px;
			}


			.col-sm-12 {
			position: relative;
			min-height: 1px;
			padding-right: 0px;
			padding-left: 0px;
			}

			.top{

			.top {
			/* border: 1px solid #00c6ff; */
			height: 900px;
			}

			.left {
			/* border: 1px solid #00c6ff; */
			height: 300px;
			}
			.bottom{

			.ctn {
			/* border: 1px solid #00c6ff; */
			height: 450px;
			}

			.bottom {
			/* border: 1px solid #00c6ff; */
			height: 600px;
			}
			.bottom_left{

			.bottom_left {
			/* border: 1px solid #00c6ff; */
			height: 300px;
			}






			.col-sm-12,
			.col-sm-2,
			.col-sm-3,
			.col-sm-4,
			.col-sm-5,
			.col-sm-6,
			.col-sm-7,
			.col-sm-8 {
			position: relative;
			min-height: 1px;
			padding-right: 0px;
			padding-left: 0px;
			}




			#mychart1,
			#mychart2,
			#mychart3{
			width: 100%;
			border: none;
			height: 300px;
			}
			#mychart4,
			#mychart5{
			#mychart5 {
			width: 100%;
			border: none;
			height: 300px;
			}
			#mychart6,
			#mychart7{

			#mychart2, #mychart3,
			#mychart6, #mychart7 {
			width: 100%;
			border: none;
			height: 600px;
			height: 450px;
			}

			#cList {
			margin: 20% auto;
			color: #00c6ff;
			}

			#cList li {
			margin: 26px auto;
			text-align:center;
			}

			#cList li {
			margin: 26px auto;
			text-align: center;
			}

			#cList1 {
			float: left;
			}

			#cList1 li {
			float: left;
			height: 450px;
			color: #00c6ff;
			font-size: 20px;
			/文字居中/
			text-align: center;
			/display: flex;/
			}

			#cList1 li span {
			/文字居中/
			display: inline-block;
			height: 100%;
			/文字居中/

			/文字竖排/
			writing-mode: vertical-lr;
			/从左向右从右向左是 writing-mode: vertical-rl;/
			writing-mode: tb-lr;
			/IE浏览器的从左向右从右向左是 writing-mode: tb-rl；/
			}

			#cList1 li {
			float: left;
			height: 450px;
			color: #00c6ff;
			font-size: 20px;
			/文字居中/
			text-align: center;
			/display: flex;/
			}

			#cList1 li span {
			/文字居中/
			display: inline-block;
			height: 100%;
			/文字居中/
			/文字竖排/
			writing-mode: vertical-lr;
			/从左向右从右向左是 writing-mode: vertical-rl;/
			writing-mode: tb-lr;
			/IE浏览器的从左向右从右向左是 writing-mode: tb-rl；/
			}
			</style>
			<script type="text/javascript">

			//参数配置
			var HouseCode = '509';

			var interval; //计时器
			var ReworkProgress = 0; //返工率
			var EndProgress = 0; //总完工率
			var WkShop = []; //车间产量对比车间数组
			var TaskQty = []; //车间产量对比任务数数组
			var EndQty = []; //车间产量对比完成数数组
			var FDte = []; //返工趋势时间数组
			var FQty = []; //返工趋势值数组
			var CHour = []; //成品仓库吞吐量时间数组
			var COrderQty = []; //成品仓库吞吐量任务数数组
			var CInQty = []; //成品仓库吞吐量入库数数组
			var XSHour = []; //产销比分析时间数组
			var XSOrderQty = []; //产销比分析任务数数组
			var XSInQty = []; //产销比分析入库数数组
			var ZDte = []; //生产总效率趋势时间数组
			var ZQty = []; //生产总效率趋势值数组
			$(document).ready(function () {
			// 创建两个变量，一个数组中的月和日的名称
			var monthNames = ["1 月", "2 月", "3 月", "4 月", "5 月", "6 月", "7 月", "8 月", "9 月", "10 月", "11 月", "12 月"];
			@@ -176,15 +201,15 @@
			var ss = date1.getSeconds();
			var dayNames = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
			var Stamp = new Date();




			$('#Date').html(year + " 年" + " " + monthNames[month] + ' ' + day + " 日  " + ' ' + dayNames[Stamp.getDay()]);
			$("#hours").html((hh < 10 ? ("0" + hh) : hh));
			$("#min").html((mm < 10 ? ("0" + mm) : mm));
			$("#sec").html((ss < 10 ? ("0" + ss) : ss));


			}, 1000);


			});
			$(function () {
			var mychart1 = echarts.init(document.getElementById('mychart1'));
			@@ -194,47 +219,122 @@
			var mychart5 = echarts.init(document.getElementById('mychart5'));
			var mychart6 = echarts.init(document.getElementById('mychart6'));
			var mychart7 = echarts.init(document.getElementById('mychart7'));
			Chart(mychart1,mychart2,mychart3,mychart4,mychart5,mychart6,mychart7);
			//根据窗口的大小变动图表 --- 重点
			window.onresize = function () {
			myChart1.resize();
			myChart2.resize();
			myChart3.resize();
			myChart4.resize();
			myChart5.resize();
			Chart(mychart1, mychart2, mychart3, mychart4, mychart5, mychart6, mychart7);
			// 定时器
			interval = setInterval(function () {
			ReworkProgress = 0; //返工率
			EndProgress = 0; //总完工率
			WkShop = []; //车间产量对比车间数组
			TaskQty = []; //车间产量对比任务数数组
			EndQty = []; //车间产量对比完成数数组
			FDte = []; //返工趋势时间数组
			FQty = []; //返工趋势值数组
			CHour = []; //成品仓库吞吐量时间数组
			COrderQty = []; //成品仓库吞吐量任务数数组
			CInQty = []; //成品仓库吞吐量入库数数组
			XSHour = []; //产销比分析时间数组
			XSOrderQty = []; //产销比分析任务数数组
			XSInQty = []; //产销比分析入库数数组
			ZDte = []; //生产总效率趋势时间数组
			ZQty = []; //生产总效率趋势值数组
			Chart(mychart1, mychart2, mychart3, mychart4, mychart5, mychart6, mychart7);
			}, 30000);
			//根据浏览器大小改变大小
			window.onresize = () => {
			mychart1.resize();
			mychart2.resize();
			mychart3.resize();
			mychart4.resize();
			mychart5.resize();
			}
			})

			function Chart(mychart1,mychart2,mychart3,mychart4,mychart5,mychart6,mychart7){

			function Chart(mychart1, mychart2, mychart3, mychart4, mychart5, mychart6, mychart7) {
			$.ajax({
			url: GetWEBURL() + "/loaddata/PrctPlan",
			dataType: "JSON",
			async: false,//使用同步的方式,true为异步方式
			type: "Get",
			data: { "HouseCode": HouseCode },
			success: function (data) {
			//返工率
			ReworkProgress = data.data[0][0].ReworkProgress;
			//订单量
			$("#OrderQty").html(data.data[1][0].OrderQty);
			//产量
			$("#ProductQty").html(data.data[1][0].PrctQty);
			//总完工率
			EndProgress = data.data[2][0].EndProgress;

			//车间产量对比
			$.each(data.data[3], function (index, val) {
			WkShop.push(val.WkShop);
			TaskQty.push(parseFloat(val.TaskQty).toFixed(0));
			EndQty.push(parseFloat(val.EndQty).toFixed(0));
			});

			//返工趋势
			$.each(data.data[4], function (index, val) {
			FDte.push(val.Dte);
			FQty.push(parseFloat(val.Qty).toFixed(0));
			});

			//成品仓库吞吐量
			$.each(data.data[5], function (index, val) {
			CHour.push(val.hour.substring(5));
			COrderQty.push(parseFloat(val.OrderQty).toFixed(0));
			CInQty.push(parseFloat(val.InQty).toFixed(0));
			});

			//产销比分析
			$.each(data.data[6], function (index, val) {
			XSHour.push(val.hour.substring(5));
			XSOrderQty.push(parseFloat(val.XSOrderQty).toFixed(0));
			XSInQty.push(parseFloat(val.InQty).toFixed(0));
			});

			//生产总效率趋势图
			$.each(data.data[7], function (index, val) {
			ZDte.push(val.Dte);
			ZQty.push(parseFloat(val.Qty).toFixed(0));
			});


			},
			error: function (data) {

			}
			})

			const colorList = ['#47A2FF', '#ff9900']
			option1 = {
			title: [
			{
			text: '',
			subtext: '60%',
			textStyle: {
			fontSize: 16,
			color: '#999',
			lineHeight: 20
			{
			text: '',
			subtext: ReworkProgress + '%',
			textStyle: {
			fontSize: 16,
			color: '#999',
			lineHeight: 20
			},
			subtextStyle: {
			fontSize: 28,
			color: '#00c6ff'
			},
			textAlign: 'center',
			left: '50%',
			top: '50%'
			},
			subtextStyle: {
			fontSize: 28,
			color: '#00c6ff'
			},
			textAlign: 'center',
			left: '50%',
			top: '50%'
			},
			{
			show: true,
			text: '返工率（全部产线）',
			textStyle: {
			color: '#00c6ff',
			fontSize: '16',
			},
			textAlign: 'left',

			}
			{
			show: true,
			text: '返工率（全部产线）',
			textStyle: {
			color: '#00c6ff',
			fontSize: '16',
			},
			textAlign: 'left',

			}
			],
			tooltip: {
			trigger: 'item',
			@@ -246,101 +346,167 @@
			},
			color: colorList,
			series: [
			{
			name: '占比',
			type: 'pie',
			radius: [50, 80],
			center: ['50%', '50%'],
			center: ['50%', '60%'],
			avoidLabelOverlap: false,
			label: {
			show: false
			},
			labelLine: {
			show: false
			},
			itemStyle: {
			borderWidth: 3,
			borderColor: '#000000'
			},
			data: [
			{ name: '', value: 60 },
			{ name: '', value: 40 }
			],
			}
			{
			name: '占比',
			type: 'pie',
			radius: [50, 80],
			center: ['50%', '50%'],
			center: ['50%', '60%'],
			avoidLabelOverlap: false,
			label: {
			show: false
			},
			labelLine: {
			show: false
			},
			itemStyle: {
			borderWidth: 3,
			borderColor: '#000000'
			},
			data: [
			{ name: '', value: ReworkProgress },
			{ name: '', value: 100 - ReworkProgress }
			],
			}
			]
			};



			var highlight = '#00c6ff';
			var demoData = [
			{ name: '总完工率', value: EndProgress, unit: '%', pos: ['50%', '60%'], range: [0, 100] },
			];
			option2 = {
			title: [
			{
			text: '',
			subtext: '30%',
			textStyle: {
			fontSize: 16,
			color: '#999',
			lineHeight: 20
			},
			subtextStyle: {
			fontSize: 28,
			color: '#00c6ff'
			},
			textAlign: 'center',
			left: '50%',
			top: '50%'
			},
			{
			show: true,
			text: '总完工率',
			textStyle: {
			color: '#00c6ff',
			fontSize: '16',
			},
			textAlign: 'center',
			left: '50%',
			top: '5%'
			}
			],
			tooltip: {
			trigger: 'item',
			},
			legend: {
			type: 'scroll',
			icon: 'pin',
			show: false
			},
			color: colorList,
			series: [
			{
			name: '占比',
			type: 'pie',
			radius: [50, 80],
			center: ['50%', '50%'],
			center: ['50%', '60%'],
			avoidLabelOverlap: false,
			label: {
			show: false
			},
			labelLine: {
			show: false
			},
			itemStyle: {
			borderWidth: 3,
			borderColor: '#000000'
			},
			data: [
			{ name: '', value: 30 },
			{ name: '', value: 100-30 }
			],
			}
			]
			series: (function () {
			var result = [];

			demoData.forEach(function (item) {
			result.push(
			// 外围刻度
			{
			type: 'gauge',
			radius: '80%', // 1行3个
			center: ['50%', '60%'], //边距
			splitNumber: item.splitNum \|\| 10,
			min: item.range[0],
			max: item.range[1],
			startAngle: 180,
			endAngle: 0,
			axisLine: {
			show: true,
			lineStyle: {
			width: 2,
			shadowBlur: 0,
			color: [
			[1, highlight]
			]
			}
			},
			axisTick: {
			show: true,
			lineStyle: {
			color: highlight,
			width: 1
			},
			length: -5,
			splitNumber: 10
			},
			splitLine: {
			show: true,
			length: -14,
			lineStyle: {
			color: highlight,
			}
			},
			axisLabel: {
			distance: -20,
			textStyle: {
			color: highlight,
			fontSize: '14',
			fontWeight: 'bold'
			}
			},
			pointer: {
			show: 0
			},
			detail: {
			show: 0
			}
			},

			// 内侧指针、数值显示
			{
			name: item.name,
			type: 'gauge',
			center: item.pos,
			radius: '70%',
			center: ['50%', '60%'], //边距
			startAngle: 180,
			endAngle: 0,
			min: item.range[0],
			max: item.range[1],
			axisLine: {
			show: true,
			lineStyle: {
			width: 16,
			color: [
			[1, 'rgba(255,255,255,.1)']
			]
			}
			},
			axisTick: {
			show: 0,
			},
			splitLine: {
			show: 0,
			},
			axisLabel: {
			show: 0
			},
			pointer: {
			show: true,
			length: '105%'
			},
			detail: {
			show: true,
			offsetCenter: [0, '50%'],
			textStyle: {
			fontSize: 20,
			color: '#00c6ff'
			},
			formatter: [
			'{value} ' + (item.unit \|\| ''),
			'{name\|' + item.name + '}'
			].join('\n'),
			rich: {
			name: {
			fontSize: 20,
			lineHeight: 30,
			color: '#00c6ff'
			}
			}
			},
			itemStyle: {
			normal: {
			color: highlight,
			}
			},
			data: [{
			value: item.value
			}]
			}
			);
			});

			return result;
			})()
			};


			option3 = {
			tooltip : {
			tooltip: {
			trigger: 'axis',
			axisPointer : { // 坐标轴指示器，坐标轴触发有效
			type : 'shadow' // 默认为直线，可选为：'line' \| 'shadow'
			axisPointer: { // 坐标轴指示器，坐标轴触发有效
			type: 'shadow' // 默认为直线，可选为：'line' \| 'shadow'
			}
			},
			legend: {
			@@ -352,20 +518,20 @@
			}
			},
			grid: {
			top:'10%',
			top: '10%',
			left: '3%',
			right: '4%',
			bottom: '5%',
			containLabel: true
			},
			xAxis: {
			xAxis: {
			type: 'value',
			max: 1000,
			//max: 1000,
			axisTick: {
			alignWithLabel: true
			},
			splitLine:{
			show:false
			splitLine: {
			show: false
			},
			axisLine: {
			show: true,
			@@ -385,7 +551,7 @@
			},
			yAxis: {
			type: 'category',
			data: ['车间1','车间2','车间3','车间4','车间5','车间6','车间7'],
			data: WkShop,
			axisLine: {
			show: true,
			lineStyle: {
			@@ -394,13 +560,13 @@
			width: 1, //隐藏y轴
			}
			},
			splitLine:{
			show:false
			splitLine: {
			show: false
			},
			splitLine: { //网格线
			lineStyle: {
			color: '#00c6ff',


			},
			show: false //隐藏或显示
			},
			@@ -412,55 +578,55 @@
			}
			},
			series: [
			{
			name: '任务数',
			type: 'bar',
			stack: '总量',
			barWidth: 10,
			itemStyle:{
			normal: {
			color: '#47A2FF',
			barBorderRadius: [20, 20, 20, 20],
			}
			},
			label: {
			normal: {
			show: true,
			position: 'insideRight'
			}
			},
			z: 10,
			data: [320, 302, 301, 334, 390, 330, 320]
			},
			{
			name: '完成数',
			type: 'bar',
			stack: '总量',
			barWidth: 10,
			itemStyle:{
			normal: {
			color: '#ff9900',
			shadowBlur: [0, 0, 0, 10],
			shadowColor: '#ff9900',
			barBorderRadius: [20, 20, 20, 20],
			shadowOffsetX: 0,
			}
			},
			label: {
			normal: {
			show: true,
			position: 'insideRight',
			textStyle: { //文字样式
			//fontSize:12
			{
			name: '任务数',
			type: 'bar',
			stack: '总量',
			barWidth: 10,
			itemStyle: {
			normal: {
			color: '#47A2FF',
			barBorderRadius: [20, 20, 20, 20],
			}
			}
			},
			label: {
			normal: {
			show: true,
			position: 'insideRight'
			}
			},
			z: 10,
			data: TaskQty
			},
			z: 5,
			data: [120, 132, 101, 134, 90, 230, 210]
			}
			{
			name: '完成数',
			type: 'bar',
			stack: '总量',
			barWidth: 10,
			itemStyle: {
			normal: {
			color: '#ff9900',
			shadowBlur: [0, 0, 0, 10],
			shadowColor: '#ff9900',
			barBorderRadius: [20, 20, 20, 20],
			shadowOffsetX: 0,
			}
			},
			label: {
			normal: {
			show: true,
			position: 'insideRight',
			textStyle: { //文字样式
			//fontSize:12
			}
			}
			},
			z: 5,
			data: EndQty
			}
			]
			};


			option4 = {
			tooltip: {
			trigger: 'item',
			@@ -475,7 +641,7 @@
			xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['8点','9点','10点','11点','12点','13点','14点','15点','16点','17点','18点'], //时间点数据
			data: FDte, //时间点数据
			axisLine: {
			show: true,
			lineStyle: {
			@@ -532,8 +698,8 @@
			legend: {
			icon: 'line',
			data: ['小时产能'],
			x:'right', //可设定图例在左、右、居中
			y:'top', //可设定图例在上、下、居中
			x: 'right', //可设定图例在左、右、居中
			y: 'top', //可设定图例在上、下、居中
			//padding:[0,0,0,0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
			textStyle: {
			color: '#00c6ff',
			@@ -542,29 +708,29 @@
			}
			},
			series: [
			{
			name: '小时产能',
			data: [50,80,90,110,130,115,120,109,105,135,125], //时间点值
			type: 'line',
			smooth: true,
			itemStyle: {
			normal: {
			color: 'orange',
			lineStyle: {
			width: 4, //设置线条粗细
			shadowColor: 'rgba(255, 94, 91,.1)',
			shadowOffsetX: 3,
			shadowOffsetY: 5,
			}
			{
			name: '小时产能',
			data: FQty, //时间点值
			type: 'line',
			smooth: true,
			itemStyle: {
			normal: {
			color: 'orange',
			lineStyle: {
			width: 4, //设置线条粗细
			shadowColor: 'rgba(255, 94, 91,.1)',
			shadowOffsetX: 3,
			shadowOffsetY: 5,
			}
			},
			},
			textStyle: {
			fontFamily: "微软雅黑"
			}
			},
			textStyle: {
			fontFamily: "微软雅黑"
			}
			},
			]
			}


			option5 = {
			title: {
			text: '成品仓库吞吐量（按天查询）',
			@@ -578,7 +744,7 @@
			},
			color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
			tooltip: {


			},
			grid: {
			left: '3%',
			@@ -594,71 +760,71 @@
			fontSize: 16,
			fontFamily: "微软雅黑"
			}


			},
			xAxis: [
			{
			type: 'category',
			data:['05-11','05-12','05-13','205-14','05-15','05-16'],
			axisTick: {
			alignWithLabel: true
			},

			axisLine: {
			show: true,
			lineStyle: {
			color: '#00c6ff',
			type: 'solid', //设置网格线类型 dotted：虚线 solid:实线
			width: 1, //隐藏y轴
			}
			},
			axisLabel: {
			show: true,
			textStyle: {
			color: '#00c6ff', //坐标值得具体的颜色
			fontSize: '16'
			{
			type: 'category',
			data: CHour,
			axisTick: {
			alignWithLabel: true
			},

			axisLine: {
			show: true,
			lineStyle: {
			color: '#00c6ff',
			type: 'solid', //设置网格线类型 dotted：虚线 solid:实线
			width: 1, //隐藏y轴
			}
			},
			axisLabel: {
			show: true,
			textStyle: {
			color: '#00c6ff', //坐标值得具体的颜色
			fontSize: '16'
			}
			}
			}
			}
			],
			yAxis: [
			{
			type: 'value',
			axisLine: {
			show: false,

			},
			splitLine: { //网格线
			lineStyle: {
			color: '#00c6ff',

			{
			type: 'value',
			axisLine: {
			show: false,

			},
			show: true //隐藏或显示
			},
			axisLabel: {
			textStyle: {
			color: '#00c6ff', //坐标值得具体的颜色
			fontSize: '16'
			splitLine: { //网格线
			lineStyle: {
			color: '#00c6ff',

			},
			show: true //隐藏或显示
			},
			axisLabel: {
			textStyle: {
			color: '#00c6ff', //坐标值得具体的颜色
			fontSize: '16'
			}
			}
			}
			}
			],
			series: [
			{
			name: '订单数',
			type: 'bar',
			barWidth: 15,
			data: [100,100,100,100,100,100]
			},
			{
			name: '入库数',
			type: 'bar',
			barWidth: 15,
			data: [50,50,50,50,50,50]
			}
			{
			name: '订单数',
			type: 'bar',
			barWidth: 15,
			data: COrderQty
			},
			{
			name: '入库数',
			type: 'bar',
			barWidth: 15,
			data: CInQty
			}
			]
			};


			option6 = {
			title: {
			text: '产销比分析（按天查询）',
			@@ -672,7 +838,7 @@
			},
			color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
			tooltip: {


			},
			grid: {
			left: '5%',
			@@ -688,71 +854,71 @@
			fontSize: 16,
			fontFamily: "微软雅黑"
			}


			},
			xAxis: [
			{
			type: 'category',
			data:['05-11','05-12','05-13','205-14','05-15','05-16'],
			axisTick: {
			alignWithLabel: true
			},

			axisLine: {
			show: true,
			lineStyle: {
			color: '#00c6ff',
			type: 'solid', //设置网格线类型 dotted：虚线 solid:实线
			width: 1, //隐藏y轴
			}
			},
			axisLabel: {
			show: true,
			textStyle: {
			color: '#00c6ff', //坐标值得具体的颜色
			fontSize: '16'
			{
			type: 'category',
			data: XSHour,
			axisTick: {
			alignWithLabel: true
			},

			axisLine: {
			show: true,
			lineStyle: {
			color: '#00c6ff',
			type: 'solid', //设置网格线类型 dotted：虚线 solid:实线
			width: 1, //隐藏y轴
			}
			},
			axisLabel: {
			show: true,
			textStyle: {
			color: '#00c6ff', //坐标值得具体的颜色
			fontSize: '16'
			}
			}
			}
			}
			],
			yAxis: [
			{
			type: 'value',
			axisLine: {
			show: false,

			},
			splitLine: { //网格线
			lineStyle: {
			color: '#00c6ff',

			{
			type: 'value',
			axisLine: {
			show: false,

			},
			show: true //隐藏或显示
			},
			axisLabel: {
			textStyle: {
			color: '#00c6ff', //坐标值得具体的颜色
			fontSize: '16'
			splitLine: { //网格线
			lineStyle: {
			color: '#00c6ff',

			},
			show: true //隐藏或显示
			},
			axisLabel: {
			textStyle: {
			color: '#00c6ff', //坐标值得具体的颜色
			fontSize: '16'
			}
			}
			}
			}
			],
			series: [
			{
			name: '销售订单数',
			type: 'bar',
			barWidth: 15,
			data: [100,100,100,100,100,100]
			},
			{
			name: '入库数',
			type: 'bar',
			barWidth: 15,
			data: [50,50,50,50,50,50]
			}
			{
			name: '销售订单数',
			type: 'bar',
			barWidth: 15,
			data: XSOrderQty
			},
			{
			name: '入库数',
			type: 'bar',
			barWidth: 15,
			data: XSInQty
			}
			]
			};


			option7 = {
			tooltip: {
			trigger: 'item',
			@@ -767,7 +933,7 @@
			xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['8点','9点','10点','11点','12点','13点','14点','15点','16点','17点','18点'], //时间点数据
			data: ZDte, //时间点数据
			axisLine: {
			show: true,
			lineStyle: {
			@@ -827,8 +993,8 @@
			legend: {
			icon: 'line',
			data: ['小时产能'],
			x:'right', //可设定图例在左、右、居中
			y:'top', //可设定图例在上、下、居中
			x: 'right', //可设定图例在左、右、居中
			y: 'top', //可设定图例在上、下、居中
			//padding:[0,0,0,0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
			textStyle: {
			color: '#00c6ff',
			@@ -837,29 +1003,29 @@
			}
			},
			series: [
			{
			name: '小时产能',
			data: [50,80,90,110,130,115,120,109,105,135,125], //时间点值
			type: 'line',
			smooth: true,
			itemStyle: {
			normal: {
			color: 'orange',
			lineStyle: {
			width: 4, //设置线条粗细
			shadowColor: 'rgba(255, 94, 91,.1)',
			shadowOffsetX: 3,
			shadowOffsetY: 5,
			}
			{
			name: '小时产能',
			data: ZQty, //时间点值
			type: 'line',
			smooth: true,
			itemStyle: {
			normal: {
			color: 'orange',
			lineStyle: {
			width: 4, //设置线条粗细
			shadowColor: 'rgba(255, 94, 91,.1)',
			shadowOffsetX: 3,
			shadowOffsetY: 5,
			}
			},
			},
			textStyle: {
			fontFamily: "微软雅黑"
			}
			},
			textStyle: {
			fontFamily: "微软雅黑"
			}
			},
			]
			}


			mychart1.setOption(option1);
			mychart2.setOption(option2);
			mychart3.setOption(option3);
			@@ -868,12 +1034,12 @@
			mychart6.setOption(option6);
			mychart7.setOption(option7);
			}


			</script>
			</head>

			<body>
			<div class='title'>韩电生产计划看板</div>
			<div class='title'>生产计划看板</div>
			<div class="clock">
			<ul>
			<li id="Date"></li>
			@@ -885,11 +1051,46 @@
			</ul>

			</div>
			<div class="col-sm-8 top">
			<div class="col-sm-6 top">
			<div class="col-sm-4 top">
			<div class="col-sm-12 left">
			<div id="mychart1"></div>
			</div>
			<div class="col-sm-3 top">
			<div class="col-sm-12 left">
			<div id="mychart4"></div>
			</div>
			<div class="col-sm-12 left">
			<div id="mychart5"></div>
			</div>
			</div>
			<div class="col-sm-4 ctn">
			<div class="col-sm-3 ctn">
			<ul id="cList">
			<li style="font-size:24px;">订单量</li>
			<li style="font-size:24px;"><span id="OrderQty"></span></li>
			<li style="font-size:24px;">产量</li>
			<li style="font-size:24px;"><span id="ProductQty"></span></li>
			</ul>
			</div>
			<div class="col-sm-9 ctn">
			<div id="mychart2"></div>
			</div>
			<div class="col-sm-12 ctn">
			<div id="mychart6"></div>
			</div>
			</div>
			<div class="col-sm-4 top">
			<div class="col-sm-12 ctn">
			<div id="mychart3"></div>
			</div>
			<div class="col-sm-12 ctn">
			<div id="mychart7"></div>
			</div>
			</div>
			<!-- <div class="col-sm-8 top">
			<div class="col-sm-5 top">
			<div id="mychart1"></div>
			</div>
			<div class="col-sm-2 top">
			<ul id="cList">
			<li style="font-size:24px;">订单量</li>
			<li style="font-size:24px;"><span id="OrderQty">10000</span></li>
			@@ -897,7 +1098,7 @@
			<li style="font-size:24px;"><span id="ProductQty">8000</span></li>
			</ul>
			</div>
			<div class="col-sm-3 top">
			<div class="col-sm-5 top">
			<div id="mychart2"></div>
			</div>
			</div>
			@@ -906,7 +1107,7 @@
			</div>

			<div class="col-sm-8 bottom">
			<div class="col-sm-6 bottom_left">
			<div class="col-sm-5 bottom_left">
			<div class="col-sm-12 bottom_left">
			<div id="mychart4"></div>
			</div>
			@@ -920,7 +1121,7 @@
			</div>
			<div class="col-sm-4 bottom">
			<div id="mychart7"></div>
			</div>
			</div> -->
			</body>

			</html>