var demoData = [{
name: '',
value: 95,
},];
option = {
backgroundColor: '#02041B',
title: [{
text: '今年用电',
bottom: '200',
x: 'center',
borderColor: '#fff',
padding: [7, 14],
textStyle: {
fontWeight: 'normal',
fontSize: 18,
color: '#fff'
}
}],
series: (function () {
var result = [];
demoData.forEach(function (item) {
result.push({
name: '背景圈',
type: 'gauge',
radius: '50%',
center:['50%','50%'],
startAngle: 220,
endAngle: -40,
axisLine: { // 坐标轴线
roundCap: true,
lineStyle: { // 属性lineStyle控制线条样式
color: [
[
1, '#1B2B37'
],
],
width: 20
}
},
splitLine: { //分隔线样式
show: false,
},
axisLabel: { //刻度标签
show: false,
},
pointer: {
show: false,
},
axisTick: { //刻度样式
show: false,
},
detail: {
show: false,
offsetCenter: [0, '60%'],
textStyle: {
fontSize: 32,
color: '#fff'
},
formatter: function () {
return 'SO2';
}
},
},
{
name: '刻度',
type: 'gauge',
radius: '40%',
startAngle: 220,
endAngle: -45,
min: 0,
max: 100,
splitNumber: 4, //刻度数量
startAngle: 220,
endAngle: -45,
axisLine: {
show: true,
lineStyle: {
width: 5,
color: [
[
item.value / 100, new echarts.graphic.LinearGradient(
0, 1, 1, 0, [{
offset: 0,
color: '#6CDFFF',
},
{
offset: 1,
color: '#3AFFC5',
}
]
)
],
[
1, 'rgba(255,255,255,.0)'
]
]
}
}, //仪表盘轴线
axisLabel: {
show: false,
color: 'aqua',
distance: 30
}, //刻度标签。
axisTick: {
show: false,
splitNumber: 20, //刻度的段落数
lineStyle: {
color: '#1E2E3A',
width: 1
},
length: -12
}, //刻度样式
splitLine: {
show: false,
length: -18,
lineStyle: {
color: '#fff'
}
}, //分隔线样式
detail: {
show: false
},
pointer: {
show: false
}
},
// 最外层含中间数据
{
name: item.name,
type: 'gauge',
radius: '50%',
startAngle: 220,
endAngle: -45,
min: 0,
max: 100,
axisLine: {
show: true,
roundCap: true,
lineStyle: {
width: 20,
color: [
[
item.value / 100, new echarts.graphic.LinearGradient(
0, 1, 1, 0, [{
offset: 0,
color: '#6CDFFF',
},
{
offset: 1,
color: '#3AFFC5',
}
]
)
],
[
1, 'rgba(255,255,255,.0)'
]
]
}
},
axisTick: {
show: 0,
},
splitLine: {
show: 0,
},
axisLabel: {
show: 0
},
pointer: {
show: false,
},
detail: {
show: true,
offsetCenter: [0, 0],
textStyle: {
fontSize: 32,
color: '#fff',
},
},
// itemStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
// offset: 0,
// color: 'red'
// }, {
// offset: 1,
// color: 'pink'
// }]),
// },
pointer: {
icon: 'circle', // 箭头图标
length: '12%',
width: 30,
height: 30,
offsetCenter: [0, '-89%'], // 箭头位置
itemStyle: {
color: '#FFFFFF', // 箭头颜色
shadowColor: '#3ABCFF',
shadowBlur: 20
},
},
data: [{
value: item.value
}]
});
});
return result;
})()
};