option = {
backgroundColor: '#0E1327',
tooltip: {
formatter: '{a} <br/>{b} : {c}%',
},
series: [
{
type: 'gauge',
radius: '30%',
center: ['20%', '40%'],
startAngle: '225',
endAngle: '-45',
pointer: {
show: true,
length: '60%',
width: 4,
itemStyle: {
color: '#2F8FFF',
},
},
anchor: {
show: true,
showAbove: true,
size: 4,
itemStyle: {
color: '#030A2C',
},
},
detail: {
formatter: '{value}%',
fontSize: 24,
color: '#fff',
offsetCenter: [0, '110%'],
},
data: [
{
value: 90.12,
name: '排产达成',
title: {
offsetCenter: ['0%', '150%'],
fontSize: 18,
color: '#C9D2FA',
show: true,
},
},
],
title: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: [
[1 / 2, '#2F8FFF'],
[1, '#566093'],
],
width: 10,
// shadowBlur: 15,
// shadowColor: '#B0C4DE',
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1,
},
},
axisLabel: {
show: false,
}, //刻度标签。
axisTick: {
splitNumber: 3,
distance: 4,
show: true,
lineStyle: {
color: '#566093',
width: 2,
},
length: 2,
}, //刻度样式
splitLine: {
show: true,
distance: 4,
lineStyle: {
color: '#566093',
width: 2,
},
length: 4,
}, //分隔线样式
animationDuration: 4000,
},
{
type: 'gauge',
radius: '30%',
center: ['50%', '40%'],
startAngle: '225',
endAngle: '-45',
pointer: {
show: true,
length: '60%',
width: 4,
itemStyle: {
color: '#4ACBAC',
},
},
anchor: {
show: true,
showAbove: true,
size: 4,
itemStyle: {
color: '#030A2C',
},
},
detail: {
formatter: '{value}%',
fontSize: 24,
color: '#fff',
offsetCenter: [0, '110%'],
},
data: [
{
value: 39.53,
name: '出货达成',
title: {
offsetCenter: ['0%', '150%'],
fontSize: 18,
color: '#C9D2FA',
show: true,
},
},
],
title: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: [
[1 / 2, '#4ACBAC'],
[1, '#566093'],
],
width: 10,
// shadowBlur: 15,
// shadowColor: '#B0C4DE',
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1,
},
},
axisLabel: {
show: false,
}, //刻度标签。
axisTick: {
splitNumber: 3,
distance: 4,
show: true,
lineStyle: {
color: '#566093',
width: 2,
},
length: 2,
}, //刻度样式
splitLine: {
show: true,
distance: 4,
lineStyle: {
color: '#566093',
width: 2,
},
length: 4,
}, //分隔线样式
animationDuration: 4000,
},
{
type: 'gauge',
radius: '30%',
center: ['80%', '40%'],
startAngle: '225',
endAngle: '-45',
pointer: {
show: true,
length: '60%',
width: 4,
itemStyle: {
color: '#BC53EE',
},
},
anchor: {
show: true,
showAbove: true,
size: 4,
itemStyle: {
color: '#030A2C',
},
},
detail: {
formatter: '{value}%',
fontSize: 24,
color: '#fff',
offsetCenter: [0, '110%'],
},
data: [
{
value: 85.34,
name: '计划配套率',
title: {
offsetCenter: ['0%', '150%'],
fontSize:18,
color: '#C9D2FA',
show: true,
},
},
],
title: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: [
[1 / 2, '#BC53EE'],
[1, '#566093'],
],
width: 10,
// shadowBlur: 15,
// shadowColor: '#B0C4DE',
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1,
},
},
axisLabel: {
show: false,
}, //刻度标签。
axisTick: {
splitNumber: 3,
distance: 4,
show: true,
lineStyle: {
color: '#566093',
width: 2,
},
length: 2,
}, //刻度样式
splitLine: {
show: true,
distance: 4,
lineStyle: {
color: '#566093',
width: 2,
},
length: 4,
}, //分隔线样式
animationDuration: 4000,
},
],
}