const value = 40;
const color = '#00E5F1';
option = {
backgroundColor: '#0F224C', //背景色
title: {
text: `{a|${value}%}}`,
x: 'center',
y: 'center',
textStyle: {
rich: {
a: {
fontSize: 30,
color: '#fff',
}
},
},
},
series: [
{
name: 'outside_circle',
type: 'gauge',
splitNumber: 35,
radius: '38%',
center: ['50%', '50%'],
startAngle: 90,
endAngle: -269.9999,
axisLine: {
show: false,
lineStyle: {
color: [
[0, '#8ACFFF'],
[1, '#8ACFFF'],
],
},
},
axisTick: {
show: false,
},
splitLine: {
show: true,
length: 3,
lineStyle: {
color: 'auto',
width: 3,
},
},
axisLabel: {
show: false,
},
detail: {
show: false,
},
},
{
name: 'cover_circle',
type: 'pie',
radius: ['20%', '28%'],
center: ['50%', '50%'],
z: 2,
avoidLabelOverlap: true,
hoverAnimation: false,
label: {
normal: {
show: false,
position: 'center',
},
emphasis: {
show: false,
},
},
labelLine: {
normal: {
show: false,
},
},
splitLine: {
show: false,
},
data: [
{
value: value,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: `rgba(138,207,255)`
}, {
offset: 1,
color: `rgba(14,53,255)`
}]),
},
},
},
{
value: 100 - value,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: `rgba(138,207,255,.2)`
}, {
offset: 1,
color: `rgba(14,53,255,.2)`
}]),
},
},
},
],
},
{
name: 'inside_circle',
type: 'gauge',
splitNumber: 12,
startAngle: 0,
endAngle: 360,
radius: '40%',
center: ['50%', '50%'],
z: 3,
axisLine: {
show: false,
lineStyle: {
color: [
[0, '#001B55'],
[1, '#001B55'],
],
},
},
splitLine: {
show: true,
length: 57,
lineStyle: {
color: 'auto',
width: 2,
},
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
detail: {
show: false,
},
},
],
};