var bgColor = '#041F34',
borderColor = "#fff",
axisColor='#FFEB3B'
let dataVal = 52
const steps = 10; // 总共10个步骤
// 使用数组和循环动态生成颜色数组
const axisLinecolor = Array.from({ length: steps + 1 }, (_, index) => {
const ratio = index / steps;
const colorValue = ratio <= (dataVal / 100) ? axisColor : 'transparent';
return [ratio, colorValue];
});
option = {
backgroundColor: bgColor,
color: [borderColor],
title: [
{
text: '轻度污染',
x: 'center',
top: '40%',
textStyle: {
color: '#FFE600',
fontSize: 56,
fontWeight: '600',
},
},],
series: [{
type: 'pie',
zlevel: 1,
radius: ['60%'],
center: ['50%', '105.5%'],
silent: true,
startAngle: 180,
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: _pie1()
},
{
type: 'pie',
zlevel: 0,
silent: true,
center: ['50%', '60%'],
radius: ['87%', '90%'],
startAngle: -100,
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: [1]
},
{
name: "",
type: 'gauge',
splitNumber: 8, //刻度数量
min: 0,
max: 100,
radius: '80%', //图表尺寸
center: ['50%', '60%'],
zlevel: 12,
axisLine: {
show: true,
lineStyle: {
width: 0,
shadowBlur: 0,
color: [
[1, '#cccccccc']
]
}
},
axisTick: {
show: true,
lineStyle: {
color: 'auto',
width: 10
},
length: 28,
splitNumber: 5
},
splitLine: {
show: true,
length: 22,
lineStyle: {
color: 'auto',
}
},
axisLabel: {
show: false
},
pointer: { //仪表盘指针
show: 0,
},
detail: {
show: 0,
},
data: [
{
name: "PM2.5",
title: {
// 配置“家居总数”的样式
show: true,
fontSize: 28,
fontWeight: 700,
// fontFamily: fontFamily.fontFamily65W,
color: "rgba(128,255,255,1)",
offsetCenter: ["0", "70%"],
},
},
],
},
{
name: '统计',
type: 'gauge',
splitNumber: 8, //刻度数量
min: 0,
max: 100,
radius: '80%', //图表尺寸
center: ['50%', '60%'],
zlevel: 21,
axisLine: {
show: true,
lineStyle: {
width: 0,
shadowBlur: 0,
color:axisLinecolor
// color:[[dataVal/100,'#FFEB3B'],[1,'transparent']],
// color: [
// [0, borderColor],
// [0.10, borderColor],
// [0.20, borderColor],
// [0.30, borderColor],
// [0.40, borderColor],
// [0.50, borderColor],
// [0.60, borderColor],
// [0.70, 'transparent'],
// [0.80, 'transparent'],
// [0.90, 'transparent'],
// [1, 'transparent']
// ]
}
},
axisTick: {
show: true,
lineStyle: {
color: 'auto',
width: 10
},
length: 28,
splitNumber: 5
},
splitLine: {
show: true,
length: 22,
lineStyle: {
color: 'auto',
}
},
axisLabel: {
show: false
},
pointer: { //仪表盘指针
show: 0,
length: '70%',
width: 2,
},
detail: {
valueAnimation: true,
show: true,
color: "#fff",
fontFamily: 'sans-serif',
offsetCenter: [-30, '10%'],
fontSize: 56,
},
title: {
offsetCenter: [40, '15%'],
color: "#fff",
fontSize: 24
},
// data: [{
// name: "",
// value: 10
// }]
data: [{'name':'ug/m³','value': dataVal}],
}, {
zlevel: 3,
top: '94.1%',
breadcrumb: {
show: false
},
levels: [{
color: [bgColor],
}],
itemStyle: {
normal: {
borderColor: bgColor
}
},
roam: false,
nodeClick: false,
width: '100%',
height: 80,
type: 'treemap',
data: [{
name: '', // First tree
value: 1
}]
}
]
};
function _pie1() {
let dataArr = [];
for (var i = 0; i < 2; i++) {
if (i % 2 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 20,
itemStyle: {
normal: {
color: "#0071F2",
borderWidth: 0,
borderColor: "#fff",
borderWidth: 10,
}
}
})
} else {
dataArr.push({
name: (i + 1).toString(),
value: 20,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
})
}
}
return dataArr
}