option = {
backgroundColor:'#050f1b',
angleAxis: {
show: false,
max: 10,
type: 'value',
startAngle: 180,
splitLine: {
show: false,
},
},
legend: {
show: false,
},
radiusAxis: {
show: false,
type: 'category',
z: 10,
},
polar: {
//圆环大小
radius: '100%',
},
series: [
{
// 进度条
type: 'bar',
barWidth: 10,
data: [{
value: 5,
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 1,
color: 'rgba(237, 67, 79, 1)',
},
{
offset: 0.8,
color: 'rgba(237, 67, 79, .5)',
},
{
offset: 0.6,
color: 'rgba(253, 173, 67, 1)',
},
{
offset: 0.4,
color: 'rgba(253, 173, 67, .5)',
},
{
offset: 0.2,
color: 'rgba(17, 195, 114, .5)',
},
{
offset: 0,
color: 'rgba(17, 195, 114, 1)',
},
],
global: false,
},
},
},],
barGap: '-100%',
coordinateSystem: 'polar',
roundCap: true,
z: 2,
// animationDuration: 1500,
},
{
z: 20,
type: 'gauge',
center: ['50%', '50%'],
radius: '50%',
splitNumber: 100,
startAngle: 180,
endAngle: 0,
min: 0,
max: 5,
axisLine: {
show: true,
lineStyle: {
width: 0,
// borderColor: '#000',
// borderWidth: '10',
},
},
axisLabel: {
show: false,
},
pointer: {
// // 指针样式
//仪表盘指针
icon: 'circle',
length: 22,
width: 22,
roundCap: true,
offsetCenter: [0, '-90%'],
itemStyle: {
color: '#e9a040',
borderCap: 'round',
borderColor: '#fff',
borderWidth: '3',
},
},
data: [{
value: 4,
},],
detail: {
color: '#fff',
fontSize: 35,
offsetCenter: ['2%', '0%'],
},
axisTick: {
splitNumber: 1,
lineStyle: {
color: '#294b96',
width: 2,
},
length: 0,
},
splitLine: {
length: 0,
lineStyle: {
color: 'rgba(63,250,250,0.8)',
width: 2,
},
},
},
],
};