const count = 1.48
var option = {
backgroundColor: '#000',
tooltip: {
show: false
// formatter: "{a} <br/>值 : {c}"
},
grid: {
top: 0,
left: 0,
right: 0,
bottom: 0,
},
series: [
{ // 圆弧背景
name: "1",
type: "gauge",
center: ['50%', '60%'],
radius: '48%',
min: 0, //最小刻度
max: 3, //最大刻度
startAngle: 185,
endAngle: -5,
axisLine: {
lineStyle: {
color: [
[1, "#315267"]
],
width: 20
}
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
itemStyle: {
show: false,
},
detail: {
show: false,
offsetCenter: [0, 40],
formatter: function (value) {
return '{a| 拥堵指数：}' + `{b|${value}}`;
},
rich: {
a: {
fontSize: 15,
fontWeight: '700',
color: '#fff'
},
b: {
fontSize: 18,
fontWeight: '700',
color: 'rgba(240, 114, 12, 1)'
}
}
},
data: [{ value: 0 }],
pointer: {
show: false
},
},
{
// 渐变条
name: '2',
type: 'gauge',
center: ['50%', '60%'],
radius: '48%',
min: 0,
max: 3,
startAngle: 185,
endAngle: -5,
axisLine: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
detail: {
show: true,
offsetCenter: [0, 40],
formatter: function (value) {
return '{a| 拥堵指数：}' + `{b|${value}}`;
},
rich: {
a: {
fontSize: 15,
fontWeight: '700',
color: '#fff'
},
b: {
fontSize: 18,
fontWeight: '700',
color: 'rgba(240, 114, 12, 1)'
}
}
},
progress: {
show: true,
width: 20,
itemStyle: {
color: {
// type: 'linear',
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
colorStops: [
{
offset: 0.1,
color: '#5abf39'
},
{
offset: 0.3,
color: '#f6aa3f'
},
{
offset: 0.5,
color: '#f6aa3f'
},
{
offset: 0.8,
color: '#ff5252'
},
{
offset: 1,
color: '#ff5252'
}
]
}
}
},
data: [{ value: count }],
},
{ // 刻度
name: '3',
type: 'gauge',
center: ['50%', '60%'], //边距
radius: '60%',
startAngle: 185,
endAngle: -5,
min: 0,
max: 3,
animation: true,
detail: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
distance: -30,
fontSize: 14,
textStyle: {
color: '#88afcb'
}
},
splitLine: {
show: true,
length: 15,
lineStyle: {
width: 4,
color: '#88afcb'
}
},
pointer: {
show: false
},
itemStyle: {
color: '#7DCDEE',
},
data: [{ value: 0 }]
},
{
// 内侧指针
name: '4',
type: 'gauge',
radius: '42%',
center: ['50%', '60%'],
startAngle: 185,
endAngle: -5,
min: 0,
max: 3,
axisLine: {
show: false,
},
axisTick: {
show: 0
},
splitLine: {
show: 0
},
axisLabel: {
show: 0
},
pointer: {
show: true,
length: '105%',
width: 3
},
detail: {
show: false
},
itemStyle: {
normal: {
color: '#27d3fd'
}
},
data: [{ value: count }],
z: 9
},
{
//指针外环
name: '5',
type: 'pie',
hoverAnimation: false,
legendHoverLink: false,
center: ['50%', '60%'],
radius: '3%',
z: 10,
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
itemStyle: {
normal: {
color: '#27d3fd'
}
},
data: [{ value: 0, }]
},
{
//指针内环
name: '6',
type: 'pie',
hoverAnimation: false,
legendHoverLink: false,
center: ['50%', '60%'],
radius: '1.5%',
z: 10,
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
itemStyle: {
normal: {
color: '#f8fbff'
}
},
data: [{ value: 0 }]
}
]
}