echarts图表

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
            },
         ],
      },
   ],
};