xhj/vue_mdc_xhj.git

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,836 @@
			<template>
			<div class="comparative_Gauge" style="width: 100%;height: 700px;display: flex;flex-direction: column;overflow: scroll">
			<div style="flex: 1;text-align:center;display: flex;flex-direction: column">
			<h3 style="height: 18px;margin: 0 auto;">å©ç¨ç Top 5</h3>

			<div style="flex: 1;display: flex;">
			<div id="top1Gauge" class="div-inline"></div>
			<div id="top2Gauge" class="div-inline"></div>
			<div id="top3Gauge" class="div-inline"></div>
			<div id="top4Gauge" class="div-inline"></div>
			<div id="top5Gauge" class="div-inline"></div>
			</div>
			</div>
			<div style="flex: 1;text-align:center;display: flex;flex-direction: column">
			<h3 style="height: 18px; margin: 0 auto;">å©ç¨ç Last 5</h3>

			<div style="flex: 1;display: flex;">
			<div id="last1Gauge" class="div-inline"></div>
			<div id="last2Gauge" class="div-inline"></div>
			<div id="last3Gauge" class="div-inline"></div>
			<div id="last4Gauge" class="div-inline"></div>
			<div id="last5Gauge" class="div-inline"></div>
			</div>
			</div>
			</div>
			</template>

			<script>
			import * as echarts from 'echarts'
			export default {
			name: 'comparativeAnalysisGauge',
			props:{dataList:''},
			data(){
			return{
			utilizationRateTopOne:0,
			utilizationRateTopOneEquipment:0,
			utilizationRateTopTwo:0,
			utilizationRateTopTwoEquipment:0,
			utilizationRateTopThree:0,
			utilizationRateTopThreeEquipment:0,
			utilizationRateTopFour:0,
			utilizationRateTopFourEquipment:0,
			utilizationRateTopFive:0,
			utilizationRateTopFiveEquipment:0,
			utilizationRateLastOne:0,
			utilizationRateLastOneEquipment:0,
			utilizationRateLastTwo:0,
			utilizationRateLastTwoEquipment:0,
			utilizationRateLastThree:0,
			utilizationRateLastThreeEquipment:0,
			utilizationRateLastFour:0,
			utilizationRateLastFourEquipment:0,
			utilizationRateLastFive:0,
			utilizationRateLastFiveEquipment:0,
			TopLastList:[]
			}
			},
			watch:{
			dataList(val){
			console.log(val);
			this.TopLastList = val
			this.draw()
			},
			},
			mounted(){
			this.draw();
			},
			methods:{
			draw(){
			let gaugeTopChart1 = this.$echarts.init(document.getElementById('top1Gauge'),'macarons');
			let gaugeTopChart2 = this.$echarts.init(document.getElementById('top2Gauge'),'macarons');
			let gaugeTopChart3 = this.$echarts.init(document.getElementById('top3Gauge'),'macarons');
			let gaugeTopChart4 = this.$echarts.init(document.getElementById('top4Gauge'),'macarons');
			let gaugeTopChart5 = this.$echarts.init(document.getElementById('top5Gauge'),'macarons');
			let gaugeLastChart1 = this.$echarts.init(document.getElementById('last1Gauge'),'macarons');
			let gaugeLastChart2 = this.$echarts.init(document.getElementById('last2Gauge'),'macarons');
			let gaugeLastChart3 = this.$echarts.init(document.getElementById('last3Gauge'),'macarons');
			let gaugeLastChart4 = this.$echarts.init(document.getElementById('last4Gauge'),'macarons');
			let gaugeLastChart5 = this.$echarts.init(document.getElementById('last5Gauge'),'macarons');
			let gaugeTopOption1 = {
			title : {
			x : 'center',
			y : 'bottom',
			text : 'TOP1'
			},
			tooltip : {
			formatter: "{a} <br/>{b} : {c}%"
			},
			series : [
			{
			name:'TOP1',
			type:'gauge',
			splitNumber: 10, // åå²æ®µæ°ï¼é»è®¤ä¸º5
			axisLine: { // åæ è½´çº¿
			lineStyle: { // å±æ§lineStyleæ§å¶çº¿æ¡æ ·å¼
			color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
			width: 8
			}
			},
			axisTick: { // åæ è½´å°æ è®°
			splitNumber: 10, // æ¯ä»½splitç»åå¤å°æ®µ
			length :12, // å±æ§lengthæ§å¶çº¿é¿
			lineStyle: { // å±æ§lineStyleæ§å¶çº¿æ¡æ ·å¼
			color: 'auto'
			}
			},
			axisLabel: { // åæ è½´ææ¬æ ç¾ï¼è¯¦è§axis.axisLabel
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			color: 'auto'
			}
			},
			splitLine: { // åéçº¿
			show: true, // é»è®¤æ¾ç¤ºï¼å±æ§showæ§å¶æ¾ç¤ºä¸å¦
			length :30, // å±æ§lengthæ§å¶çº¿é¿
			lineStyle: { // å±æ§lineStyleï¼è¯¦è§lineStyleï¼æ§å¶çº¿æ¡æ ·å¼
			color: 'auto'
			}
			},
			pointer : {
			width : 5
			},
			title : {
			show : false,
			offsetCenter: [0, '-40%'], // x, yï¼åä½px
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			fontWeight: 'bolder'
			}
			},
			detail : {
			formatter:'{value}%',
			offsetCenter: [0, '60%'],
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			color: 'auto',
			fontWeight: 'bolder',
			fontSize:20
			}
			},
			data:[{value: 0, name: 'å©ç¨ç'}]
			}
			]
			};
			let gaugeTopOption2 = {
			title : {
			x : 'center',
			y : 'bottom',
			text : 'TOP2'
			},
			tooltip : {
			formatter: "{a} <br/>{b} : {c}%"
			},
			series : [
			{
			name:'TOP2',
			type:'gauge',
			splitNumber: 10, // åå²æ®µæ°ï¼é»è®¤ä¸º5
			axisLine: { // åæ è½´çº¿
			lineStyle: { // å±æ§lineStyleæ§å¶çº¿æ¡æ ·å¼
			color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
			width: 8
			}
			},
			axisTick: { // åæ è½´å°æ è®°
			splitNumber: 10, // æ¯ä»½splitç»åå¤å°æ®µ
			length :12, // å±æ§lengthæ§å¶çº¿é¿
			lineStyle: { // å±æ§lineStyleæ§å¶çº¿æ¡æ ·å¼
			color: 'auto'
			}
			},
			axisLabel: { // åæ è½´ææ¬æ ç¾ï¼è¯¦è§axis.axisLabel
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			color: 'auto'
			}
			},
			splitLine: { // åéçº¿
			show: true, // é»è®¤æ¾ç¤ºï¼å±æ§showæ§å¶æ¾ç¤ºä¸å¦
			length :30, // å±æ§lengthæ§å¶çº¿é¿
			lineStyle: { // å±æ§lineStyleï¼è¯¦è§lineStyleï¼æ§å¶çº¿æ¡æ ·å¼
			color: 'auto'
			}
			},
			pointer : {
			width : 5
			},
			title : {
			show : false,
			offsetCenter: [0, '-40%'], // x, yï¼åä½px
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			fontWeight: 'bolder'
			}
			},
			detail : {
			formatter:'{value}%',
			offsetCenter: [0, '60%'],
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			color: 'auto',
			fontWeight: 'bolder',
			fontSize:20
			}
			},
			data:[{value: 0, name: 'å©ç¨ç'}]
			}
			]
			};
			let gaugeTopOption3 = {
			title : {
			x : 'center',
			y : 'bottom',
			text : 'TOP3'
			},
			tooltip : {
			formatter: "{a} <br/>{b} : {c}%"
			},
			series : [
			{
			name:'TOP3',
			type:'gauge',
			splitNumber: 10, // åå²æ®µæ°ï¼é»è®¤ä¸º5
			axisLine: { // åæ è½´çº¿
			lineStyle: { // å±æ§lineStyleæ§å¶çº¿æ¡æ ·å¼
			color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
			width: 8
			}
			},
			axisTick: { // åæ è½´å°æ è®°
			splitNumber: 10, // æ¯ä»½splitç»åå¤å°æ®µ
			length :12, // å±æ§lengthæ§å¶çº¿é¿
			lineStyle: { // å±æ§lineStyleæ§å¶çº¿æ¡æ ·å¼
			color: 'auto'
			}
			},
			axisLabel: { // åæ è½´ææ¬æ ç¾ï¼è¯¦è§axis.axisLabel
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			color: 'auto'
			}
			},
			splitLine: { // åéçº¿
			show: true, // é»è®¤æ¾ç¤ºï¼å±æ§showæ§å¶æ¾ç¤ºä¸å¦
			length :30, // å±æ§lengthæ§å¶çº¿é¿
			lineStyle: { // å±æ§lineStyleï¼è¯¦è§lineStyleï¼æ§å¶çº¿æ¡æ ·å¼
			color: 'auto'
			}
			},
			pointer : {
			width : 5
			},
			title : {
			show : false,
			offsetCenter: [0, '-40%'], // x, yï¼åä½px
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			fontWeight: 'bolder'
			}
			},
			detail : {
			formatter:'{value}%',
			offsetCenter: [0, '60%'],
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			color: 'auto',
			fontWeight: 'bolder',
			fontSize:20
			}
			},
			data:[{value: 0, name: 'å©ç¨ç'}]
			}
			]
			};
			let gaugeTopOption4 = {
			title : {
			x : 'center',
			y : 'bottom',
			text : 'TOP4'
			},
			tooltip : {
			formatter: "{a} <br/>{b} : {c}%"
			},
			series : [
			{
			name:'TOP4',
			type:'gauge',
			splitNumber: 10, // åå²æ®µæ°ï¼é»è®¤ä¸º5
			axisLine: { // åæ è½´çº¿
			lineStyle: { // å±æ§lineStyleæ§å¶çº¿æ¡æ ·å¼
			color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
			width: 8
			}
			},
			axisTick: { // åæ è½´å°æ è®°
			splitNumber: 10, // æ¯ä»½splitç»åå¤å°æ®µ
			length :12, // å±æ§lengthæ§å¶çº¿é¿
			lineStyle: { // å±æ§lineStyleæ§å¶çº¿æ¡æ ·å¼
			color: 'auto'
			}
			},
			axisLabel: { // åæ è½´ææ¬æ ç¾ï¼è¯¦è§axis.axisLabel
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			color: 'auto'
			}
			},
			splitLine: { // åéçº¿
			show: true, // é»è®¤æ¾ç¤ºï¼å±æ§showæ§å¶æ¾ç¤ºä¸å¦
			length :30, // å±æ§lengthæ§å¶çº¿é¿
			lineStyle: { // å±æ§lineStyleï¼è¯¦è§lineStyleï¼æ§å¶çº¿æ¡æ ·å¼
			color: 'auto'
			}
			},
			pointer : {
			width : 5
			},
			title : {
			show : false,
			offsetCenter: [0, '-40%'], // x, yï¼åä½px
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			fontWeight: 'bolder'
			}
			},
			detail : {
			formatter:'{value}%',
			offsetCenter: [0, '60%'],
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			color: 'auto',
			fontWeight: 'bolder',
			fontSize:20
			}
			},
			data:[{value: 0, name: 'å©ç¨ç'}]
			}
			]
			};
			let gaugeTopOption5 = {
			title : {
			x : 'center',
			y : 'bottom',
			text : 'TOP5'
			},
			tooltip : {
			formatter: "{a} <br/>{b} : {c}%"
			},
			series : [
			{
			name:'TOP5',
			type:'gauge',
			splitNumber: 10, // åå²æ®µæ°ï¼é»è®¤ä¸º5
			axisLine: { // åæ è½´çº¿
			lineStyle: { // å±æ§lineStyleæ§å¶çº¿æ¡æ ·å¼
			color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
			width: 8
			}
			},
			axisTick: { // åæ è½´å°æ è®°
			splitNumber: 10, // æ¯ä»½splitç»åå¤å°æ®µ
			length :12, // å±æ§lengthæ§å¶çº¿é¿
			lineStyle: { // å±æ§lineStyleæ§å¶çº¿æ¡æ ·å¼
			color: 'auto'
			}
			},
			axisLabel: { // åæ è½´ææ¬æ ç¾ï¼è¯¦è§axis.axisLabel
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			color: 'auto'
			}
			},
			splitLine: { // åéçº¿
			show: true, // é»è®¤æ¾ç¤ºï¼å±æ§showæ§å¶æ¾ç¤ºä¸å¦
			length :30, // å±æ§lengthæ§å¶çº¿é¿
			lineStyle: { // å±æ§lineStyleï¼è¯¦è§lineStyleï¼æ§å¶çº¿æ¡æ ·å¼
			color: 'auto'
			}
			},
			pointer : {
			width : 5
			},
			title : {
			show : false,
			offsetCenter: [0, '-40%'], // x, yï¼åä½px
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			fontWeight: 'bolder'
			}
			},
			detail : {
			formatter:'{value}%',
			offsetCenter: [0, '60%'],
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			color: 'auto',
			fontWeight: 'bolder',
			fontSize:20
			}
			},
			data:[{value: 0, name: 'å©ç¨ç'}]
			}
			]
			};
			let gaugeLessOption1 = {
			title : {
			x : 'center',
			y : 'bottom',
			text : 'LAST1'
			},
			tooltip : {
			formatter: "{a} <br/>{b} : {c}%"
			},
			series : [
			{
			name:'LAST1',
			type:'gauge',
			splitNumber: 10, // åå²æ®µæ°ï¼é»è®¤ä¸º5
			axisLine: { // åæ è½´çº¿
			lineStyle: { // å±æ§lineStyleæ§å¶çº¿æ¡æ ·å¼
			color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
			width: 8
			}
			},
			axisTick: { // åæ è½´å°æ è®°
			splitNumber: 10, // æ¯ä»½splitç»åå¤å°æ®µ
			length :12, // å±æ§lengthæ§å¶çº¿é¿
			lineStyle: { // å±æ§lineStyleæ§å¶çº¿æ¡æ ·å¼
			color: 'auto'
			}
			},
			axisLabel: { // åæ è½´ææ¬æ ç¾ï¼è¯¦è§axis.axisLabel
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			color: 'auto'
			}
			},
			splitLine: { // åéçº¿
			show: true, // é»è®¤æ¾ç¤ºï¼å±æ§showæ§å¶æ¾ç¤ºä¸å¦
			length :30, // å±æ§lengthæ§å¶çº¿é¿
			lineStyle: { // å±æ§lineStyleï¼è¯¦è§lineStyleï¼æ§å¶çº¿æ¡æ ·å¼
			color: 'auto'
			}
			},
			pointer : {
			width : 5
			},
			title : {
			show : false,
			offsetCenter: [0, '-40%'], // x, yï¼åä½px
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			fontWeight: 'bolder'
			}
			},
			detail : {
			formatter:'{value}%',
			offsetCenter: [0, '60%'],
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			color: 'auto',
			fontWeight: 'bolder',
			fontSize:20
			}
			},
			data:[{value: 0, name: 'å©ç¨ç'}]
			}
			]
			};
			let gaugeLessOption2 = {
			title : {
			x : 'center',
			y : 'bottom',
			text : 'LAST2'
			},
			tooltip : {
			formatter: "{a} <br/>{b} : {c}%"
			},
			series : [
			{
			name:'LAST2',
			type:'gauge',
			splitNumber: 10, // åå²æ®µæ°ï¼é»è®¤ä¸º5
			axisLine: { // åæ è½´çº¿
			lineStyle: { // å±æ§lineStyleæ§å¶çº¿æ¡æ ·å¼
			color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
			width: 8
			}
			},
			axisTick: { // åæ è½´å°æ è®°
			splitNumber: 10, // æ¯ä»½splitç»åå¤å°æ®µ
			length :12, // å±æ§lengthæ§å¶çº¿é¿
			lineStyle: { // å±æ§lineStyleæ§å¶çº¿æ¡æ ·å¼
			color: 'auto'
			}
			},
			axisLabel: { // åæ è½´ææ¬æ ç¾ï¼è¯¦è§axis.axisLabel
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			color: 'auto'
			}
			},
			splitLine: { // åéçº¿
			show: true, // é»è®¤æ¾ç¤ºï¼å±æ§showæ§å¶æ¾ç¤ºä¸å¦
			length :30, // å±æ§lengthæ§å¶çº¿é¿
			lineStyle: { // å±æ§lineStyleï¼è¯¦è§lineStyleï¼æ§å¶çº¿æ¡æ ·å¼
			color: 'auto'
			}
			},
			pointer : {
			width : 5
			},
			title : {
			show : false,
			offsetCenter: [0, '-40%'], // x, yï¼åä½px
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			fontWeight: 'bolder'
			}
			},
			detail : {
			formatter:'{value}%',
			offsetCenter: [0, '60%'],
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			color: 'auto',
			fontWeight: 'bolder',
			fontSize:20
			}
			},
			data:[{value: 0, name: 'å©ç¨ç'}]
			}
			]
			};
			let gaugeLessOption3 = {
			title : {
			x : 'center',
			y : 'bottom',
			text : 'LAST3'
			},
			tooltip : {
			formatter: "{a} <br/>{b} : {c}%"
			},
			series : [
			{
			name:'LAST3',
			type:'gauge',
			splitNumber: 10, // åå²æ®µæ°ï¼é»è®¤ä¸º5
			axisLine: { // åæ è½´çº¿
			lineStyle: { // å±æ§lineStyleæ§å¶çº¿æ¡æ ·å¼
			color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
			width: 8
			}
			},
			axisTick: { // åæ è½´å°æ è®°
			splitNumber: 10, // æ¯ä»½splitç»åå¤å°æ®µ
			length :12, // å±æ§lengthæ§å¶çº¿é¿
			lineStyle: { // å±æ§lineStyleæ§å¶çº¿æ¡æ ·å¼
			color: 'auto'
			}
			},
			axisLabel: { // åæ è½´ææ¬æ ç¾ï¼è¯¦è§axis.axisLabel
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			color: 'auto'
			}
			},
			splitLine: { // åéçº¿
			show: true, // é»è®¤æ¾ç¤ºï¼å±æ§showæ§å¶æ¾ç¤ºä¸å¦
			length :30, // å±æ§lengthæ§å¶çº¿é¿
			lineStyle: { // å±æ§lineStyleï¼è¯¦è§lineStyleï¼æ§å¶çº¿æ¡æ ·å¼
			color: 'auto'
			}
			},
			pointer : {
			width : 5
			},
			title : {
			show : false,
			offsetCenter: [0, '-40%'], // x, yï¼åä½px
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			fontWeight: 'bolder'
			}
			},
			detail : {
			formatter:'{value}%',
			offsetCenter: [0, '60%'],
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			color: 'auto',
			fontWeight: 'bolder',
			fontSize:20
			}
			},
			data:[{value: 0, name: 'å©ç¨ç'}]
			}
			]
			};
			let gaugeLessOption4 = {
			title : {
			x : 'center',
			y : 'bottom',
			text : 'LAST4'
			},
			tooltip : {
			formatter: "{a} <br/>{b} : {c}%"
			},
			series : [
			{
			name:'LAST4',
			type:'gauge',
			splitNumber: 10, // åå²æ®µæ°ï¼é»è®¤ä¸º5
			axisLine: { // åæ è½´çº¿
			lineStyle: { // å±æ§lineStyleæ§å¶çº¿æ¡æ ·å¼
			color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
			width: 8
			}
			},
			axisTick: { // åæ è½´å°æ è®°
			splitNumber: 10, // æ¯ä»½splitç»åå¤å°æ®µ
			length :12, // å±æ§lengthæ§å¶çº¿é¿
			lineStyle: { // å±æ§lineStyleæ§å¶çº¿æ¡æ ·å¼
			color: 'auto'
			}
			},
			axisLabel: { // åæ è½´ææ¬æ ç¾ï¼è¯¦è§axis.axisLabel
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			color: 'auto'
			}
			},
			splitLine: { // åéçº¿
			show: true, // é»è®¤æ¾ç¤ºï¼å±æ§showæ§å¶æ¾ç¤ºä¸å¦
			length :30, // å±æ§lengthæ§å¶çº¿é¿
			lineStyle: { // å±æ§lineStyleï¼è¯¦è§lineStyleï¼æ§å¶çº¿æ¡æ ·å¼
			color: 'auto'
			}
			},
			pointer : {
			width : 5
			},
			title : {
			show : false,
			offsetCenter: [0, '-40%'], // x, yï¼åä½px
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			fontWeight: 'bolder'
			}
			},
			detail : {
			formatter:'{value}%',
			offsetCenter: [0, '60%'],
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			color: 'auto',
			fontWeight: 'bolder',
			fontSize:20
			}
			},
			data:[{value: 0, name: 'å©ç¨ç'}]
			}
			]
			};
			let gaugeLessOption5 = {
			title : {
			x : 'center',
			y : 'bottom',
			text : 'LAST5'
			},
			tooltip : {
			formatter: "{a} <br/>{b} : {c}%"
			},
			series : [
			{
			name:'LAST5',
			type:'gauge',
			splitNumber: 10, // åå²æ®µæ°ï¼é»è®¤ä¸º5
			axisLine: { // åæ è½´çº¿
			lineStyle: { // å±æ§lineStyleæ§å¶çº¿æ¡æ ·å¼
			color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
			width: 8
			}
			},
			axisTick: { // åæ è½´å°æ è®°
			splitNumber: 10, // æ¯ä»½splitç»åå¤å°æ®µ
			length :12, // å±æ§lengthæ§å¶çº¿é¿
			lineStyle: { // å±æ§lineStyleæ§å¶çº¿æ¡æ ·å¼
			color: 'auto'
			}
			},
			axisLabel: { // åæ è½´ææ¬æ ç¾ï¼è¯¦è§axis.axisLabel
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			color: 'auto'
			}
			},
			splitLine: { // åéçº¿
			show: true, // é»è®¤æ¾ç¤ºï¼å±æ§showæ§å¶æ¾ç¤ºä¸å¦
			length :30, // å±æ§lengthæ§å¶çº¿é¿
			lineStyle: { // å±æ§lineStyleï¼è¯¦è§lineStyleï¼æ§å¶çº¿æ¡æ ·å¼
			color: 'auto'
			}
			},
			pointer : {
			width : 5
			},
			title : {
			show : false,
			offsetCenter: [0, '-40%'], // x, yï¼åä½px
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			fontWeight: 'bolder'
			}
			},
			detail : {
			formatter:'{value}%',
			offsetCenter: [0, '60%'],
			textStyle: { // å¶ä½å±æ§é»è®¤ä½¿ç¨å¨å±ææ¬æ ·å¼ï¼è¯¦è§TEXTSTYLE
			color: 'auto',
			fontWeight: 'bolder',
			fontSize:20
			}
			},
			data:[{value: 0, name: 'å©ç¨ç'}]
			}
			]
			};
			if(this.TopLastList != null){
			this.utilizationRateTopOne=0
			this.utilizationRateTopOneEquipment = 'TOP1'
			this.utilizationRateTopTwo=0
			this.utilizationRateTopTwoEquipment = 'TOP2'
			this.utilizationRateTopThree=0
			this.utilizationRateTopThreeEquipment = 'TOP3'
			this.utilizationRateTopFour =0
			this.utilizationRateTopFourEquipment = 'TOP4'
			this.utilizationRateTopFive=0
			this.utilizationRateTopFiveEquipment = 'TOP5'
			this.utilizationRateLastOne=0
			this.utilizationRateLastOneEquipment = 'LAST1'
			this.utilizationRateLastTwo=0
			this.utilizationRateLastTwoEquipment = 'LAST2'
			this.utilizationRateLastThree=0
			this.utilizationRateLastThreeEquipment = 'LAST3'
			this.utilizationRateLastFour=0
			this.utilizationRateLastFourEquipment = 'LAST4'
			this.utilizationRateLastFive=0
			this.utilizationRateLastFiveEquipment = 'LAST5'
			if(this.TopLastList.tops){
			for(var i = 0;i<this.TopLastList.tops.length;i++){
			if(i == 0){
			this.utilizationRateTopOneEquipment=this.TopLastList.tops[0].equipmentId
			this.utilizationRateTopOne=this.TopLastList.tops[0].utilizationRate
			}else if(i == 1){
			this.utilizationRateTopTwoEquipment=this.TopLastList.tops[1].equipmentId
			this.utilizationRateTopTwo=this.TopLastList.tops[1].utilizationRate
			}else if(i == 2){
			this.utilizationRateTopThreeEquipment=this.TopLastList.tops[2].equipmentId
			this.utilizationRateTopThree=this.TopLastList.tops[2].utilizationRate
			}else if(i == 3){
			this.utilizationRateTopFourEquipment=this.TopLastList.tops[3].equipmentId
			this.utilizationRateTopFour=this.TopLastList.tops[3].utilizationRate
			}else if(i == 4){
			this.utilizationRateTopFiveEquipment=this.TopLastList.tops[4].equipmentId
			this.utilizationRateTopFive=this.TopLastList.tops[4].utilizationRate
			}
			}
			}
			if(this.TopLastList.lasts){
			for(var j = 0;j<this.TopLastList.lasts.length;j++){
			if(j == 0){
			this.utilizationRateLastOneEquipment=this.TopLastList.lasts[0].equipmentId
			this.utilizationRateLastOne=this.TopLastList.lasts[0].utilizationRate
			}else if(j == 1){
			this.utilizationRateLastTwoEquipment=this.TopLastList.lasts[1].equipmentId
			this.utilizationRateLastTwo=this.TopLastList.lasts[1].utilizationRate
			}else if(j == 2){
			this.utilizationRateLastThreeEquipment=this.TopLastList.lasts[2].equipmentId
			this.utilizationRateLastThree=this.TopLastList.lasts[2].utilizationRate
			}else if(j == 3){
			this.utilizationRateLastFourEquipment=this.TopLastList.lasts[3].equipmentId
			this.utilizationRateLastFour=this.TopLastList.lasts[3].utilizationRate
			}else if(j == 4){
			this.utilizationRateLastFiveEquipment=this.TopLastList.lasts[4].equipmentId
			this.utilizationRateLastFive=this.TopLastList.lasts[4].utilizationRate
			}
			}
			}
			gaugeTopOption1.title.text = this.utilizationRateTopOneEquipment
			gaugeTopOption1.series[0].data = [{value : (this.utilizationRateTopOne * 100).toFixed(2), name : 'å©ç¨ç'}];
			gaugeTopOption2.title.text = this.utilizationRateTopTwoEquipment
			gaugeTopOption2.series[0].data = [{value : (this.utilizationRateTopTwo * 100).toFixed(2), name : 'å©ç¨ç'}];
			gaugeTopOption3.title.text = this.utilizationRateTopThreeEquipment
			gaugeTopOption3.series[0].data = [{value : (this.utilizationRateTopThree * 100).toFixed(2), name : 'å©ç¨ç'}];
			gaugeTopOption4.title.text = this.utilizationRateTopFourEquipment
			gaugeTopOption4.series[0].data = [{value : (this.utilizationRateTopFour * 100).toFixed(2), name : 'å©ç¨ç'}];
			gaugeTopOption5.title.text = this.utilizationRateTopFiveEquipment
			gaugeTopOption5.series[0].data = [{value : (this.utilizationRateTopFive * 100).toFixed(2), name : 'å©ç¨ç'}];

			gaugeLessOption1.title.text = this.utilizationRateLastOneEquipment
			gaugeLessOption1.series[0].data = [{value : (this.utilizationRateLastOne * 100).toFixed(2), name : 'å©ç¨ç'}];
			gaugeLessOption2.title.text = this.utilizationRateLastTwoEquipment
			gaugeLessOption2.series[0].data = [{value : (this.utilizationRateLastTwo * 100).toFixed(2), name : 'å©ç¨ç'}];
			gaugeLessOption3.title.text = this.utilizationRateLastThreeEquipment
			gaugeLessOption3.series[0].data = [{value : (this.utilizationRateLastThree * 100).toFixed(2), name : 'å©ç¨ç'}];
			gaugeLessOption4.title.text = this.utilizationRateLastFourEquipment
			gaugeLessOption4.series[0].data = [{value : (this.utilizationRateLastFour * 100).toFixed(2), name : 'å©ç¨ç'}];
			gaugeLessOption5.title.text = this.utilizationRateLastFiveEquipment
			gaugeLessOption5.series[0].data = [{value : (this.utilizationRateLastFive * 100).toFixed(2), name : 'å©ç¨ç'}];
			gaugeTopChart1.setOption(gaugeTopOption1);
			gaugeTopChart2.setOption(gaugeTopOption2);
			gaugeTopChart3.setOption(gaugeTopOption3);
			gaugeTopChart4.setOption(gaugeTopOption4);
			gaugeTopChart5.setOption(gaugeTopOption5);
			gaugeLastChart1.setOption(gaugeLessOption1);
			gaugeLastChart2.setOption(gaugeLessOption2);
			gaugeLastChart3.setOption(gaugeLessOption3);
			gaugeLastChart4.setOption(gaugeLessOption4);
			gaugeLastChart5.setOption(gaugeLessOption5);
			}else{
			gaugeTopChart1.setOption(gaugeTopOption1);
			gaugeTopChart2.setOption(gaugeTopOption2);
			gaugeTopChart3.setOption(gaugeTopOption3);
			gaugeTopChart4.setOption(gaugeTopOption4);
			gaugeTopChart5.setOption(gaugeTopOption5);
			gaugeLastChart1.setOption(gaugeLessOption1);
			gaugeLastChart2.setOption(gaugeLessOption2);
			gaugeLastChart3.setOption(gaugeLessOption3);
			gaugeLastChart4.setOption(gaugeLessOption4);
			gaugeLastChart5.setOption(gaugeLessOption5);
			}
			gaugeTopChart1.setOption(gaugeTopOption1);
			gaugeTopChart2.setOption(gaugeTopOption2);
			gaugeTopChart3.setOption(gaugeTopOption3);
			gaugeTopChart4.setOption(gaugeTopOption4);
			gaugeTopChart5.setOption(gaugeTopOption5);
			gaugeLastChart1.setOption(gaugeLessOption1);
			gaugeLastChart2.setOption(gaugeLessOption2);
			gaugeLastChart3.setOption(gaugeLessOption3);
			gaugeLastChart4.setOption(gaugeLessOption4);
			gaugeLastChart5.setOption(gaugeLessOption5);
			window.addEventListener('resize', function() {
			gaugeTopChart1.resize()
			gaugeTopChart2.resize()
			gaugeTopChart3.resize()
			gaugeTopChart4.resize()
			gaugeTopChart5.resize()
			gaugeLastChart1.resize()
			gaugeLastChart2.resize()
			gaugeLastChart3.resize()
			gaugeLastChart4.resize()
			gaugeLastChart5.resize()
			})
			}

			}
			}
			</script>

			<style scoped>
			.div-inline{
			flex: 1;
			}
			</style>