const pointerData = 55; // 仪表指针数据
const steps = 10; // 总共10个步骤
const borderColor = {
colorStops: [{
offset: 0,
color: 'rgba(208, 244, 255, 1)'
}, {
offset: 1,
color: 'rgba(35, 190, 240, 1)'
}]
}; // 边框颜色
// 使用数组和循环动态生成颜色数组
const axisLinecolor = Array.from({ length: steps + 1 }, (_, index) => {
const ratio = index / steps;
const colorValue = ratio <= (pointerData / 100) ? borderColor : 'transparent';
return [ratio, colorValue];
});
console.log("axisLinecolor", axisLinecolor)
var option = {
backgroundColor: "#041F34",
title: [
{
text: pointerData + '%',
x: 'center',
top: '40%',
textStyle: {
color: '#43E7FF',
fontSize: 56,
fontWeight: '600',
},
},],
series: [
{
name: "",
type: 'gauge',
splitNumber: 8, //刻度数量
min: 0,
max: 100,
radius: 210, //图表尺寸
// 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: 210, //图表尺寸
// center: ['50%', '60%'],
zlevel: 21,
axisLine: {
show: true,
lineStyle: {
width: 0,
shadowBlur: 0,
shadowColor: '#0093ee', //默认透明
color: axisLinecolor,
}
},
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: false,
color: "#fff",
fontFamily: 'sans-serif',
offsetCenter: [-30, '10%'],
fontSize: 56,
},
title: {
offsetCenter: [0, '25%'],
color: "rgba(255, 255, 255, 0.8)",
fontSize: 24
},
// data: [{
// name: "",
// value: 10
// }]
data: [{ 'name': '合格率', }],
},
{
type: 'pie',
name: '内层细圆环',
radius: ['60%', '65%'],
hoverAnimation: false,
zlevel: 2,
clockWise: true,
startAngle: '225',
endAngle: -45,
splitNumber: 50,
itemStyle: {
normal: {
color: '#07b6e3',
},
},
label: {
show: false,
},
data: [
{
value: 150,
itemStyle: {
normal: {
color: '#1D63B1',
},
},
},
{
value: 1,
itemStyle: {
normal: {
label: {
show: false,
},
labelLine: {
show: false,
},
color: 'rgba(0,0,0,0)',
borderWidth: 0,
},
emphasis: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
},
},
},
],
},
]
};