<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:{},
|
data(){
|
return{
|
utilizationRateTopOne:0,
|
utilizationRateTopTwo:0,
|
utilizationRateTopThree:0,
|
utilizationRateTopFour:0,
|
utilizationRateTopFive:0,
|
utilizationRateLastOne:0,
|
utilizationRateLastTwo:0,
|
utilizationRateLastThree:0,
|
utilizationRateLastFour:0,
|
utilizationRateLastFive:0
|
}
|
},
|
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: '利用率'}]
|
}
|
]
|
};
|
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>
|
