代码如下:
const series = [];
const centerY = 50; // 原点y轴的单位距离
const centerYOffset = 5; // 原点偏移
const centerX = 100 / 3; // 原点x轴的单位距离
const chartList = [
{
value: 4,
name: '变压器'
},
{
value: 7,
name: '手车'
},
{
value: 9,
name: '刀闸'
},
{
value: 13,
name: '荣抗'
},
{
value: 15,
name: '站用变'
},
{
value: 17,
name: '电压互感器'
}
];
chartList.forEach((item, index) => {
const radius = 30;
const titleSize = 20;
const valueSize = 40;
const center = [
centerX * (index % 3) + centerX / 2 + '%',
centerY * Math.floor(index / 3) + centerY / 2 - centerYOffset + '%'
];
series.push(
{
// 最内圈虚线圆环
type: 'gauge',
startAngle: 90,
endAngle: -270,
radius: radius - 7 + '%',
z: 2,
center,
axisLine: {
show: false
},
pointer: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: true,
distance: -1,
length: 2,
lineStyle: {
// color: 'rgba(17,131,167,0.6)',
// color: 'transparent',
width: 5
}
},
splitNumber: 30,
axisLabel: {
show: false
}
},
{
// 进度圆环
type: 'gauge',
radius: radius + '%', //控制圆环大小
startAngle: 90,
endAngle: 450,
clockWise: false, //逆向旋转
center,
z: 3,
axisLine: {
show: true,
lineStyle: {
color: [
[item.value / 30, '#14d6e3'], //蓝色部分
[1, '#8f978d'] // 灰色部分
],
width: 20 //控制每一块大小
}
},
pointer: {
show: false
},
axisTick: {
distance: -21,
show: true,
length: 22, //用于分割的高度
lineStyle: {
color: 'black',
width: 20 //分割的大小距离
}
},
splitNumber: 3,
splitLine: {
show: false
},
axisLabel: {
show: false
},
detail: {
valueAnimation: true,
// formatter: () => `${item.value}/${item.total}`,
offsetCenter: [0, 0],
fontSize: valueSize,
fontWeight: 'bolder',
color: '#fff',
},
title: {
offsetCenter: [0, '165%'],
fontSize: titleSize,
color: '#fff'
},
data: [item]
},
{
// 外圆1
type: 'pie',
z: 5,
clockWise: false,
radius: [radius + 5 + '%', radius + 4 + '%'],
center,
// clockWise: false,
itemStyle: {
// shadowBlur: 20,
// shadowColor: '#0e829b',
color: 'rgba(132,140,135,.7)'
},
label: {
show: false
},
data: [100]
},
{
// 外圆2
type: 'pie',
clockWise: false,
z: 5,
radius: [radius + 9 + '%', radius + 8 + '%'],
center,
// clockWise: false,
itemStyle: {
// shadowBlur: 20,
// shadowColor: '#0e829b',
color: 'rgba(132,140,135,.7)'
},
label: {
show: false
},
data: [100]
}
// {
// // 为了添加点击事件添加遮罩
// type: 'pie',
// z: 6,
// radius: [radius + 5 + '%', 0],
// center,
// // clockWise: false,
// itemStyle: {
// shadowBlur: 20,
// shadowColor: 'transparent',
// color: 'transparent'
// },
// label: {
// show: false
// },
// data: [item]
// }
);
});
option = {
backgroundColor: '#000',
animation: true,
series: series
};
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)