效果
代码
var total = 160
var value = 90;
var num = value / total;
var startAngle= 235;
var endAngle= -55,
option = {
backgroundColor: '#f2f5fe',
title: {
text: 'km/h',
x: 'center',
y: 450,
textStyle: {
color: '#969efb'
}
},
series: [
{
name: '外部刻度',
type: 'gauge',
radius: '50%',
min: 0,
max: 160,
splitNumber: 16,
startAngle,
center: ['50%', '50%'],
endAngle,
z: 3,
axisLine: {
roundCap: true,
lineStyle: {
width: 0,
opacity: 0,
color: [
[num, '#fff'],
[
1,
'#8a8d94',
],
],
},
},
axisLabel: {
color: 'auto',
distance: 5,
fontSize: 12,
formatter: (v, a) => {
if (Math.floor(v) % 20 === 0) {
return Math.floor(v);
}
},
},
axisTick: {
show: true,
splitNumber: 5,
lineStyle: {
color: 'auto',
width: 2,
},
length: 10,
},
splitLine: {
show: true,
length: 20,
distance: 9,
lineStyle: {
color: 'auto',
width: 3,
},
},
detail: {
show: false,
},
pointer: {
show: false,
},
},
{
name: '进度条蓝色',
type: 'gauge',
radius: '50%',
z: 1,
startAngle,
endAngle,
axisLine: {
lineStyle: {
color: [
[num, '#3b5ffd'],
[1, '#e8ebf0']
],
width: 60,
opacity: 1, //刻度背景宽度
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 5,
shadowOffsetY: 5,
shadowOffsetX: 0,
},
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
pointer: {
show: false,
},
},
{
type: 'pie',
radius: ['0', '36%'],
z: 2,
hoverAnimation: false,
labelLine: {
show: false,
},
itemStyle: {
color: '#fff',
shadowColor: '#dcdeed',
shadowBlur: 20,
shadowOffsetY: 0,
shadowOffsetX: 0
},
data: [
{
value,
label: {
color: '#3e64ff',
x: 'center',
y:100,
fontWeight: 'bold',
fontFamily: 'Microsoft YaHei',
fontSize: 80,
formatter: (params)=> {
return value ;
},
position: 'center',
show: true
}
}
],
},
],
};
