option = {
backgroundColor: "rgb(12,33,72)",
color: ["#f33335", "#efb158", "#338ae0", "#41dba7"],
tooltip: {
trigger: "item",
},
title: {
zlevel: 0,
text: 100,
subtext: "运维管理",
top: "42%",
left: "43.5%",
textAlign: "center",
textStyle: {
color: "#fff",
fontSize: 53,
},
subtextStyle: {
fontSize: 32,
color: "#fff",
},
},
legend: {
orient: "vertical",
right: 10,
top: 20,
show: false,
bottom: 20,
itemWidth: 15, // 图例图形的宽度
itemHeight: 10, // 图例图形的高度
itemGap: 30,
textStyle: {
color: "#fff",
fontSize: 14,
marginTop: 60,
},
},
series: [
{
color: ["#163d59"],
type: "gauge",
center: ["45%", "50%"],
startAngle: 150,
endAngle: -209.999,
splitNumber: 12,
radius: "70%",
pointer: {
show: false,
},
progress: {
show: false,
roundCap: true,
width: 1,
},
axisLine: {
show: false,
lineStyle: {
width: 10,
color: [
[0, "#163d59"],
[0.5, "#163d59"],
[1, "#163d59"],
],
},
},
axisTick: {
distance: -25,
length: 10,
splitNumber: 10,
lineStyle: {
width: 1,
color: "#099fe4",
},
},
splitLine: {
distance: -35,
length: 10,
lineStyle: {
width: 3,
color: "#099fe4",
},
},
axisLabel: {
show: false,
},
anchor: {
show: false,
},
title: {
show: false,
},
detail: {
show: false,
},
data: this.data1,
},
{
color: this.pieColors,
name: "",
type: "pie",
radius: ["50%", "65%"],
center: ["45%", "50%"],
startAngle: 150,
avoidLabelOverlap: false,
itemStyle: {
borderColor: "transparent",
borderWidth: 5,
},
labelLine: {
length: 30,
},
label: {
bleedMargin: 5,
alignTo: "labelLine",
position: "outer",
formatter: "{a|{c} {b}} ",
backgroundColor: "rgba(0, 0, 0, 0)",
borderColor: "rgba(0, 0, 0, 0)",
borderWidth: 1,
width: 80,
borderRadius: 4,
rich: {
a: {
color: "#fff",
lineHeight: 26,
align: "center",
fontSize: 16,
},
hr: {
borderColor: "auto",
width: "100%",
borderWidth: 1,
height: 0,
},
per: {
color: "#fff",
backgroundColor: "rgba(0, 0, 0, 0)",
padding: [5, 5],
borderRadius: 4,
fontSize: 12,
},
},
},
data: [
{
name: "告警",
value: 5
},
{
name: "预警",
value: 3
},
{
name: "缺陷",
value: 2
},
{
name: "巡检",
value: 5
},
],
},
],
};