data = [
{
value: 140,
name: '视频监控',
},
{
value: 200,
name: '新风送风',
},
{
value: 340,
name: '空调设备',
},
{
value: 70,
name: '人脸设备',
}, {
value: 56,
name: '给排水设备',
},
],
option = {
backgroundColor: '#022457',
title: {
zlevel: 0,
text: 806,
subtext: "设备管理",
top: "46%",
left: "49%",
textAlign: "center",
textStyle: {
color: "#fff",
fontSize: 20,
},
subtextStyle: {
fontSize: 14,
color: "#fff",
},
},
color: [{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(40, 218, 239, 0.2)" // 0% 处的颜色
},{
offset: 0.5,
color: "rgba(1, 243, 255, 1)" // 100% 处的颜色
},
{
offset: 1,
color: "rgba(130, 249, 255, 1)" // 100% 处的颜色
}
]
}, {
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "rgba(240, 89, 39, 0.2)" // 0% 处的颜色
},{
offset: 0.5,
color: "rgba(244, 86, 33, 1)" // 100% 处的颜色
},
{
offset: 1,
color: "rgba(255, 169, 19, 1)" // 100% 处的颜色
}
]
}, {
x: 1,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "rgba(15, 44, 88, 1)" // 0% 处的颜色
},{
offset: 0.7,
color: "rgba(40, 55, 255, 1)" // 100% 处的颜色
},
{
offset: 1,
color: "rgba(244, 245, 255, 1)" // 100% 处的颜色
}
]
},{
x: 1,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(75, 238, 114, 0.2)" // 0% 处的颜色
},
{
offset: 1,
color: "rgba(75, 238, 114, 1)" // 100% 处的颜色
}
]
},{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(255, 19, 0, 0.2)" // 0% 处的颜色
},
{
offset: 1,
color: "rgba(251, 95, 79, 1)" // 100% 处的颜色
}
]
}],
series: [
{
type: "pie",
name: "外层细圆环",
radius: ["58%", "57%"],
hoverAnimation: true,
startAngle:0,
clockWise: false,
itemStyle: {
normal: {
color: "rgba(129, 197, 200, 0.5)"
}
},
label: {
show: false
},
data: [100]
},
{
type: "pie",
name: "内层细圆环",
radius: ["40%", "39.5%"],
hoverAnimation: true,
startAngle:0,
clockWise: false,
itemStyle: {
normal: {
color: "rgba(129, 197, 200, 0.5)"
}
},
label: {
show: false
},
data: [100]
},
{
name: "",
type: "pie",
startAngle: 0,
radius: "38%",
clockWise: false,
hoverAnimation: false,
center: ["50%", "50%"],
itemStyle: {
normal: {
labelLine: {
show: false
},
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
{
offset: 1,
color: "rgba(129, 197, 200, 1)"
},
{
offset: 0,
color: "rgba(129, 197, 200, 0)"
}
]),
shadowBlur: 10
}
},
data: [
{
value: 100
}
]
},
//环形
{
name: '',
type: 'pie',
clockwise:false,
startAngle:0,
radius: ['45%', '52%'],
center: ['50%', '50%'],
hoverAnimation: false,
label: {
normal: {
show: false,
},
emphasis: {
show: false,
},
},
zlevel: 1,
labelLine: {
normal: {
show: false,
},
},
data: data,
},
//环形分割线
{
name: '分割线',
type: 'gauge',
radius: '55%',
clockwise: true,
startAngle: '90',
center: ['50%', '50%'],
startAngle:0,
endAngle: '-360',
splitNumber: 100,
zlevel: 2,
detail: {
offsetCenter: [10, 20],
formatter: ' ',
},
axisLine: {
lineStyle: {
width: 0,
opacity: 0,
},
},
axisTick: {
show: false,
},
markArea: {
itemStyle: {
color: '#0f0',
},
},
splitLine: {
show: true,
length: 32,
padding: [0, 0, 0],
lineStyle: {
color: '#022457',
width: 3,
},
},
axisLabel: {
show: false,
},
},
],
};