hy/vue_mdc_hyjs.git

			@@ -1,12 +1,13 @@
			<template>
			<div class="comparative_Bar" style="width: 100%;height: 900px;display: flex;flex-direction: column;overflow: scroll">
			<div id="compAnalBar1" style="flex: 1;"></div>
			<div id="compAnalBar2" style="flex: 1;"></div>
			<div style="height: 100%;overflow: auto">
			<div id="compAnalBar1" style="height: 400px"></div>
			<div id="compAnalBar2" style="height: 400px"></div>
			</div>
			</template>

			<script>
			import * as echarts from 'echarts'

			export default {
			name: 'comparativeAnalysisBar',
			props:{
			@@ -30,22 +31,22 @@
			dataList(val){
			this.OpenCloseList = val
			this.drawTu()
			},
			}
			},
			mounted() {
			this.drawTu()
			},
			methods:{
			drawTu(){
			let compAnalBar1 = this.$echarts.init(document.getElementById('compAnalBar1'), 'macarons');
			let compAnalBar2 = this.$echarts.init(document.getElementById('compAnalBar2'), 'macarons');
			let compAnalBar1 = this.$echarts.init(document.getElementById('compAnalBar1'), 'macarons')
			let compAnalBar2 = this.$echarts.init(document.getElementById('compAnalBar2'), 'macarons')
			let compAnalBarOption1 = {
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			type: "shadow",
			type: 'shadow',
			textStyle: {
			color: "#fff"
			color: '#fff'
			}

			}
			@@ -72,19 +73,19 @@
			grid: {
			borderWidth: 0,
			top: 110,
			bottom: 95,
			bottom: 110,
			textStyle: {
			color: "#fff"
			color: '#fff'
			}
			},
			xAxis: [
			{
			type: 'category',
			splitLine: {
			"show": false
			'show': false
			},
			axisTick: {
			"show": false
			'show': false
			},
			splitArea: {
			show: false
			@@ -92,14 +93,8 @@
			boundaryGap : true,
			axisLabel : {
			interval : 0,
			rotate : 0,
			rotate: 45,
			show: true,
			wigth:20,
			splitNumber: 8,
			textStyle: {
			fontFamily: "微软雅黑",
			fontSize: 12
			}
			},
			data : [0]
			}
			@@ -137,14 +132,14 @@
			handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
			handleSize: '110%',
			handleStyle: {
			color: "#d3dee5"
			color: '#d3dee5'
			},
			textStyle: {
			color: "#fff"
			color: '#fff'
			},
			borderColor: "#90979c"
			borderColor: '#90979c'
			}, {
			type: "inside",
			type: 'inside',
			show: true,
			height: 15,
			start: 1,
			@@ -160,29 +155,22 @@
			normal: {
			color: function(params) {
			let colorList = [
			["#6496e9","#6bded3"],
			// ["#849db8","#b4b8cc"],
			// ["#4fe1c5","#4ecee1"],
			// // ["#9978fa","#88a1fa"],
			// ["#ffbb65","#fdc68b"],
			];
			// return colorList[params.dataIndex];
			let colorItem = colorList[params.dataIndex];
			['#6496e9', '#6bded3']
			]
			let colorItem = colorList[params.dataIndex]
			return new echarts.graphic.LinearGradient(0,0,0,1,[{
			offset:0,
			color:'#6496e9'
			},
			{
			offset:1,
			color:"#6bded3"
			color: '#6bded3'
			}],false)
			},
			barBorderRadius: [5, 5, 0, 0],
			barBorderRadius: [5, 5, 0, 0]
			}
			},
			data: [0],
			// barCategoryGap: '20%',
			// barGap : '-10%',
			markPoint : {
			data : [
			{type : 'max', name: '最大值',symbolSize:70},
			@@ -198,32 +186,25 @@
			{
			name: '利用率',
			type: 'bar',
			//barWidth: 30,
			barWidth: 25,
			// barCategoryGap: '20%',
			// barGap : '-10%',
			itemStyle: {
			normal: {
			color: function(params) {
			let colorList = [
			// ["#6496e9","#6bded3"],
			// ["#849db8","#b4b8cc"],
			["#4fe1c5","#4ecee1"],
			// ["#9978fa","#88a1fa"],
			// ["#ffbb65","#fdc68b"],
			];
			['#4fe1c5', '#4ecee1']
			]
			// return colorList[params.dataIndex];
			let colorItem = colorList[params.dataIndex];
			let colorItem = colorList[params.dataIndex]
			return new echarts.graphic.LinearGradient(0,0,0,1,[{
			offset:0,
			color:"#4fe1c5"
			color: '#4fe1c5'
			},
			{
			offset:1,
			color:"#4ecee1"
			color: '#4ecee1'
			}],false)
			},
			barBorderRadius: [5, 5, 0, 0],
			barBorderRadius: [5, 5, 0, 0]
			}
			},
			data: [0],
			@@ -240,194 +221,14 @@
			}
			}
			]
			};
			// let compAnalBarOption2 = {
			// tooltip: {
			// trigger: 'axis',
			// axisPointer: {
			// type: "shadow",
			// textStyle: {
			// color: "#fff"
			// }
			//
			// }
			// },
			// legend: {
			// x: '4%',
			// top: '11%',
			// textStyle: {
			// color: '#90979c'
			// },
			// data: ['开机时间', '关机时间'],
			// color:['#6496e9','#b4b8cc']
			// },
			// toolbox: {
			// show : true,
			// feature : {
			// mark : {show: true},
			// magicType : {show: true, type: ['line', 'bar']},
			// restore : {show: true},
			// saveAsImage : {show: true,name:'设备运行时间对比分析图'}
			// }
			// },
			// calculable: true,
			// grid: {
			// borderWidth: 0,
			// top: 110,
			// bottom: 95,
			// textStyle: {
			// color: "#fff"
			// }
			// },
			// xAxis: [
			// {
			// type: 'category',
			// splitLine: {
			// "show": false
			// },
			// axisTick: {
			// "show": false
			// },
			// splitArea: {
			// show: false
			// },
			// boundaryGap : true,
			// axisLabel : {
			// interval : 0,
			// rotate : 0,
			// show: true,
			// wigth:20,
			// splitNumber: 8,
			// textStyle: {
			// fontFamily: "微软雅黑",
			// fontSize: 12
			// }
			// },
			// data : [0]
			// }
			// ],
			// yAxis: [
			// {
			// type: 'value',
			// splitLine: {
			// show: false
			// },
			// axisLine: {
			// lineStyle: {
			// color: '#90979c'
			// }
			// },
			// axisTick: {
			// show: false
			// },
			// axisLabel: {
			// interval: 0
			//
			// },
			// splitArea: {
			// show: false
			// }
			// }
			// ],
			// dataZoom: [{
			// show: true,
			// height: 30,
			// xAxisIndex: [0],
			// bottom: 30,
			// start: 0,
			// end: 100,
			// handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
			// handleSize: '110%',
			// handleStyle: {
			// color: "#d3dee5"
			// },
			// textStyle: {
			// color: "#fff"
			// },
			// borderColor: "#90979c"
			// }, {
			// type: "inside",
			// show: true,
			// height: 15,
			// start: 1,
			// end: 35
			// }],
			// series: [
			// {
			// name: '开机时间',
			// type: 'bar',
			// //barWidth: 30,
			// barWidth: 25,
			// // stack: 'sum',
			// // barCategoryGap: '20%',
			// itemStyle: {
			// normal: {
			// color: function(params) {
			// let colorList = [
			// ["#6496e9","#6bded3"],
			// // ["#849db8","#b4b8cc"],
			// // ["#4fe1c5","#4ecee1"],
			// // // ["#9978fa","#88a1fa"],
			// // ["#ffbb65","#fdc68b"],
			// ];
			// // return colorList[params.dataIndex];
			// let colorItem = colorList[params.dataIndex];
			// return new echarts.graphic.LinearGradient(0,0,0,1,[{
			// offset:0,
			// color:'#6496e9'
			// },
			// {
			// offset:1,
			// color:"#6bded3"
			// }],false)
			// },
			// barBorderRadius: [5, 5, 0, 0],
			// }
			// },
			// data: [0]
			// },
			// {
			// name: '关机时间',
			// type: 'bar',
			// //barWidth: 30,
			// barWidth: 25,
			// // stack: 'sum',
			// // barCategoryGap: '20%',
			// itemStyle: {
			// normal: {
			// color: function(params) {
			// let colorList = [
			// // ["#6496e9","#6bded3"],
			// ["#849db8","#b4b8cc"],
			// // ["#4fe1c5","#4ecee1"],
			// // // ["#9978fa","#88a1fa"],
			// // ["#ffbb65","#fdc68b"],
			// ];
			// // return colorList[params.dataIndex];
			// let colorItem = colorList[params.dataIndex];
			// return new echarts.graphic.LinearGradient(0,0,0,1,[{
			// offset:0,
			// color:'#849db8'
			// },
			// {
			// offset:1,
			// color:"#b4b8cc"
			// }],false)
			// },
			// barBorderRadius: [5, 5, 0, 0],
			// }
			// },
			// data: [0]
			// }
			// ]
			// };
			}
			let compAnalBarOption2 = {
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			type: "shadow",
			type: 'shadow',
			textStyle: {
			color: "#fff"
			color: '#fff'
			}

			}
			@@ -454,19 +255,19 @@
			grid: {
			borderWidth: 0,
			top: 110,
			bottom: 95,
			bottom: 110,
			textStyle: {
			color: "#fff"
			color: '#fff'
			}
			},
			xAxis: [
			{
			type: 'category',
			splitLine: {
			"show": false
			'show': false
			},
			axisTick: {
			"show": false
			'show': false
			},
			splitArea: {
			show: false
			@@ -474,14 +275,8 @@
			boundaryGap : true,
			axisLabel : {
			interval : 0,
			rotate : 0,
			rotate: 45,
			show: true,
			wigth:20,
			splitNumber: 8,
			textStyle: {
			fontFamily: "微软雅黑",
			fontSize: 12
			}
			},
			data : [0]
			}
			@@ -519,14 +314,14 @@
			handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
			handleSize: '110%',
			handleStyle: {
			color: "#d3dee5"
			color: '#d3dee5'
			},
			textStyle: {
			color: "#fff"
			color: '#fff'
			},
			borderColor: "#90979c"
			borderColor: '#90979c'
			}, {
			type: "inside",
			type: 'inside',
			show: true,
			height: 15,
			start: 1,
			@@ -542,29 +337,22 @@
			normal: {
			color: function(params) {
			let colorList = [
			["#6496e9","#6bded3"],
			// ["#849db8","#b4b8cc"],
			// ["#4fe1c5","#4ecee1"],
			// // ["#9978fa","#88a1fa"],
			// ["#ffbb65","#fdc68b"],
			];
			// return colorList[params.dataIndex];
			let colorItem = colorList[params.dataIndex];
			['#6496e9', '#6bded3']
			]
			let colorItem = colorList[params.dataIndex]
			return new echarts.graphic.LinearGradient(0,0,0,1,[{
			offset:0,
			color:'#6496e9'
			},
			{
			offset:1,
			color:"#6bded3"
			color: '#6bded3'
			}],false)
			},
			barBorderRadius: [5, 5, 0, 0],
			barBorderRadius: [5, 5, 0, 0]
			}
			},
			data: [0],
			// barCategoryGap: '20%',
			// barGap : '-10%',
			markPoint : {
			data : [
			{type : 'max', name: '最大值',symbolSize:70},
			@@ -580,32 +368,24 @@
			{
			name: '关机时间',
			type: 'bar',
			//barWidth: 30,
			barWidth: 25,
			// barCategoryGap: '20%',
			// barGap : '-10%',
			itemStyle: {
			normal: {
			color: function(params) {
			let colorList = [
			// ["#6496e9","#6bded3"],
			["#849db8","#b4b8cc"],
			// ["#4fe1c5","#4ecee1"],
			// ["#9978fa","#88a1fa"],
			// ["#ffbb65","#fdc68b"],
			];
			// return colorList[params.dataIndex];
			let colorItem = colorList[params.dataIndex];
			['#849db8', '#b4b8cc']
			]
			let colorItem = colorList[params.dataIndex]
			return new echarts.graphic.LinearGradient(0,0,0,1,[{
			offset:0,
			color:"#849db8"
			color: '#849db8'
			},
			{
			offset:1,
			color:"#b4b8cc"
			color: '#b4b8cc'
			}],false)
			},
			barBorderRadius: [5, 5, 0, 0],
			barBorderRadius: [5, 5, 0, 0]
			}
			},
			data: [0],
			@@ -622,7 +402,7 @@
			}
			}
			]
			};
			}
			if(this.OpenCloseList != null){
			this.equipmentList = []
			this.openRate =[]
			@@ -632,7 +412,6 @@
			for(var i = 0;i<this.OpenCloseList.length;i++){
			this.equipmentList.push(this.OpenCloseList[i].equipmentId)
			this.openRate.push((this.OpenCloseList[i].openRate*100).toFixed(2))
			// (this.openRate * 100).toFixed(2)
			this.utilizationRate.push((this.OpenCloseList[i].utilizationRate*100).toFixed(2))
			this.openLong.push(this.OpenCloseList[i].openLong)
			this.closeLong.push(this.OpenCloseList[i].closeLong)
			@@ -643,12 +422,9 @@
			compAnalBarOption2.xAxis[0].data = this.equipmentList
			compAnalBarOption2.series[0].data = this.openLong
			compAnalBarOption2.series[1].data = this.closeLong
			compAnalBar1.setOption(compAnalBarOption1);
			compAnalBar2.setOption(compAnalBarOption2);
			}else{
			compAnalBar1.setOption(compAnalBarOption1);
			compAnalBar2.setOption(compAnalBarOption2);
			}
			compAnalBar1.setOption(compAnalBarOption1)
			compAnalBar2.setOption(compAnalBarOption2)
			window.addEventListener('resize', function() {
			compAnalBar1.resize()
			compAnalBar2.resize()
			@@ -657,7 +433,3 @@
			}
			}
			</script>

			<style scoped>

			</style>