xhj/vue_mdc_xhj.git

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,440 @@
			<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>
			</template>

			<script>
			import * as echarts from 'echarts'

			export default {
			name: 'comparativeAnalysisBar',
			props: {
			dataList: {
			type: Array
			}
			},
			data() {
			return {
			compAnalBar1: null,
			compAnalBar2: null
			}
			},
			watch: {
			dataList(val) {
			this.drawTu()
			}
			},
			mounted() {
			this.drawTu()
			window.addEventListener('resize', this.handleWindowResize)
			},
			methods: {
			drawTu() {
			this.compAnalBar1 = this.$echarts.init(document.getElementById('compAnalBar1'), 'macarons')
			this.compAnalBar2 = this.$echarts.init(document.getElementById('compAnalBar2'), 'macarons')
			let compAnalBarOption1 = {
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			type: 'shadow',
			textStyle: {
			color: '#fff'
			}

			}
			},
			legend: {
			x: '4%',
			top: '11%',
			textStyle: {
			color: '#90979c'
			},
			color: ['#6496e9', '#4fe1c5'],
			data: ['å¼æºç', 'å©ç¨ç']
			},
			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,
			itemStyle: {
			normal: {
			color: function(params) {
			let colorList = [
			['#6496e9', '#6bded3']
			]
			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],
			markPoint: {
			data: [
			{ type: 'max', name: 'æå¤§å¼', symbolSize: 70 },
			{ type: 'min', name: 'æå°å¼', symbolSize: 70 }
			]
			},
			markLine: {
			data: [
			{ type: 'average', name: 'å¹³åå¼' }
			]
			}
			},
			{
			name: 'å©ç¨ç',
			type: 'bar',
			barWidth: 25,
			itemStyle: {
			normal: {
			color: function(params) {
			let colorList = [
			['#4fe1c5', '#4ecee1']
			]
			let colorItem = colorList[params.dataIndex]
			return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			offset: 0,
			color: '#4fe1c5'
			},
			{
			offset: 1,
			color: '#4ecee1'
			}], false)
			},
			barBorderRadius: [5, 5, 0, 0]
			}
			},
			data: [0],
			markPoint: {
			data: [
			{ type: 'max', name: 'æå¤§å¼', symbolSize: 70 },
			{ type: 'min', name: 'æå°å¼', symbolSize: 70 }
			]
			},
			markLine: {
			data: [
			{ type: 'average', name: 'å¹³åå¼' }
			]
			}
			}
			]
			}
			let compAnalBarOption2 = {
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			type: 'shadow',
			textStyle: {
			color: '#fff'
			}
			}
			},
			legend: {
			x: '4%',
			top: '11%',
			textStyle: {
			color: '#90979c'
			},
			color: ['#6496e9', '#b4b8cc'],
			data: ['å¼æºæ¶é´', 'å³æºæ¶é´']
			},
			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,
			itemStyle: {
			normal: {
			color: function(params) {
			let colorList = [
			['#6496e9', '#6bded3']
			]
			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],
			markPoint: {
			data: [
			{ type: 'max', name: 'æå¤§å¼', symbolSize: 70 },
			{ type: 'min', name: 'æå°å¼', symbolSize: 70 }
			]
			},
			markLine: {
			data: [
			{ type: 'average', name: 'å¹³åå¼' }
			]
			}
			},
			{
			name: 'å³æºæ¶é´',
			type: 'bar',
			barWidth: 25,
			itemStyle: {
			normal: {
			color: function(params) {
			let colorList = [
			['#849db8', '#b4b8cc']
			]
			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],
			markPoint: {
			data: [
			{ type: 'max', name: 'æå¤§å¼', symbolSize: 70 },
			{ type: 'min', name: 'æå°å¼', symbolSize: 70 }
			]
			},
			markLine: {
			data: [
			{ type: 'average', name: 'å¹³åå¼' }
			]
			}
			}
			]
			}
			console.log('dataList', this.dataList)
			if (this.dataList != null) {
			const equipmentList = this.dataList.map(item => item.equipmentId)
			const openRate = this.dataList.map(item => (item.openRate * 100).toFixed(2))
			const utilizationRate = this.dataList.map(item => (item.utilizationRate * 100).toFixed(2))
			const openLong = this.dataList.map(item => item.openLong)
			const closeLong = this.dataList.map(item => item.closeLong)

			compAnalBarOption1.xAxis[0].data = equipmentList
			compAnalBarOption1.series[0].data = openRate
			compAnalBarOption1.series[1].data = utilizationRate

			compAnalBarOption2.xAxis[0].data = equipmentList
			compAnalBarOption2.series[0].data = openLong
			compAnalBarOption2.series[1].data = closeLong
			}
			this.compAnalBar1.setOption(compAnalBarOption1,true)
			this.compAnalBar2.setOption(compAnalBarOption2,true)
			},

			handleWindowResize() {
			this.compAnalBar1.resize()
			this.compAnalBar2.resize()
			}
			}
			}
			</script>

			<style scoped>

			</style>