/* | |
title: Grogress Gauge | |
titleCN: 进度仪表盘 | |
category: gauge | |
shotWidth: 800 | |
difficulty: 3 | |
*/ | |
option = { | |
series: [{ | |
type: 'gauge', | |
startAngle: 180, | |
endAngle: 0, | |
min: 0, | |
max: 240, | |
splitNumber: 12, | |
itemStyle: { | |
color: '#58D9F9', | |
shadowColor: 'rgba(0,138,255,0.45)', | |
shadowBlur: 10, | |
shadowOffsetX: 2, | |
shadowOffsetY: 2 | |
}, | |
progress: { | |
show: true, | |
roundCap: true, | |
width: 18 | |
}, | |
pointer: { | |
icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z', | |
length: '75%', | |
width: 16, | |
offsetCenter: [0, '5%'] | |
}, | |
axisLine: { | |
roundCap: true, | |
lineStyle: { | |
width: 18 | |
} | |
}, | |
axisTick: { | |
splitNumber: 2, | |
lineStyle: { | |
width: 2, | |
color: '#999' | |
} | |
}, | |
splitLine: { | |
length: 12, | |
lineStyle: { | |
width: 3, | |
color: '#999' | |
} | |
}, | |
axisLabel: { | |
distance: 30, | |
color: '#999', | |
fontSize: 20 | |
}, | |
title: { | |
show: false | |
}, | |
detail: { | |
backgroundColor: '#fff', | |
borderColor: '#999', | |
borderWidth: 2, | |
width: '60%', | |
lineHeight: 40, | |
height: 40, | |
borderRadius: 8, | |
offsetCenter: [0, '35%'], | |
valueAnimation: true, | |
formatter: function (value) { | |
return '{value|' + value.toFixed(0) + '}{unit|km/h}'; | |
}, | |
rich: { | |
value: { | |
fontSize: 50, | |
fontWeight: 'bolder', | |
color: '#777' | |
}, | |
unit: { | |
fontSize: 20, | |
color: '#999', | |
padding: [0, 0, -20, 10] | |
} | |
} | |
}, | |
data: [{ | |
value: 100 | |
}] | |
}] | |
}; |