const getmax = 2 //仪表盘最大值
const getmin = 1 //仪表盘最小值
const getvalue = 1.34
const level = {
code: '1',
name: '月累计PUE'
}
const colors = ['#2EC478', '#FAD26B', '#F53F3F']
option ={
series: [
{
type: 'gauge',
startAngle: 225,
endAngle: -45,
min: getmin,
max: getmax,
radius: '80%',
splitNumber: 4,
progress: {
show: true,
width: 20,
itemStyle: {
// color: "#1492FF"
color: getvalue < 1.2 ? colors[0] : getvalue > 1.5 ? colors[2] : colors[1]
}
},
pointer: { show: false },
axisTick: { show: false },
splitLine: { show: false },
axisLabel: { show: false },
anchor: { show: false },
title: { show: false },
detail: { show: false },
axisLine: {
lineStyle: {
width: 20,
color: [
[1, '#E9E9E9']
]
}
},
data: [{
value: getvalue,
name: ''
}]
},
// 仪表盘
{
type: 'gauge',
startAngle: 225, // 起始角度，同极坐标
min: getmin,
max: getmax,
endAngle: -45, // 终止角度，同极坐标
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLabel: {
show: false
},
pointer: {
// 分隔线
show: false, // 是否显示指针
shadowColor: 'auto', // 默认透明
shadowBlur: 5,
length: '50%',
width: '2'
},
itemStyle: {
color: '#1598FF',
borderColor: '#1598FF',
borderWidth: 3
},
detail: {
show: false
},
title: {
show: false
},
data: [
{
value: getvalue
}
]
},
{
type: 'gauge',
name: '外层辅助',
radius: '95%',
startAngle: 225,
endAngle: -45,
min: getmin,
max: getmax,
silent: false,
pointer: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: [[1, '#DBDEE6']],
width: 2,
opacity: 1
}
},
detail: {
show: false
},
splitLine: {
show: false,
length: 10,
lineStyle: {
color: '#051932',
width: 0,
type: 'solid'
}
},
axisLabel: {
show: false
}
},
{
name: '外部刻度',
type: 'gauge',
min: getmin,
max: getmax,
startAngle: 225,
endAngle: -45,
// center: ['20%', '50%'],
radius: '90%',
splitNumber: 5, // 刻度数量
axisLine: {
show: false,
lineStyle: {
width: 1,
color: [[1, 'rgba(0,0,0,0)']]
}
}, // 仪表盘轴线
axisLabel: {
show: false,
color: '#4d5bd1',
distance: 25
}, // 刻度标签。
axisTick: { // 蓝色
show: true,
splitNumber: 20,
lineStyle: {
color: '#98C4FF', // 用颜色渐变函数不起作用
opacity: 0.6,
width: 2
},
length: 4
}, // 刻度样式
splitLine: {
show: false,
length: -10,
lineStyle: {
color: '#C7CBCF' // 用颜色渐变函数不起作用
}
}, // 分隔线样式
detail: {
show: false
},
pointer: {
show: false
}
},
{
name: '信用分',
type: 'gauge',
startAngle: 225,
endAngle: -45,
min: getmin,
max: getmax,
radius: '67%',
// splitNumber: 5, // 刻度数量
axisLine: {
show: true, // 带颜色的仪表盘
lineStyle: {
// color: [
// [1, '#999']
// ],
color: [[0.2, colors[0]], [0.5, colors[1]], [1, colors[2]]],
width: 10,
opacity: 1
}
},
title: {
show: false
},
detail: {
show: true,
offsetCenter: [0, 0],
formatter: function (value) {
return '{level|' + level.name + '}\n\n\n\n\n {value|' + getvalue + '} '
},
rich: {
verticalAlign: 'bottom', // 控制value对齐方式
value: {
fontSize: 30,
fontWeight: 500,
color: '#000'
},
level: {
fontSize: 24,
color: '#242939'
}
},
},
splitLine: { // 分割线
show: true,
distance: -10, //分割线位置
length: 10, //分割线长度
lineStyle: {
color: '#F0F2F5'
}
},
axisTick: { // 刻度线
show: false,
splitNumber: 4,
lineStyle: {
color: '#98C4FF', // 用颜色渐变函数不起作用
opacity: 0.6,
width: 2
},
length: 4
}, // 刻度样式
axisLabel: { // 刻度值
show: true,
splitNumber: 4,
formatter: function (value, index) {
const arr = [1, 1.2, 1.5, 2]
if (arr.includes(value)) { return value }
},
fontSize: 18,
distance: 14,//刻度位置
color: '#2c2c2c'
},
pointer: {
show: false,
icon: 'circle'
},
data: [{
value: getvalue,
name: '月累计PUE'
}]
}
]
};