<template>
  <div id="main3" style="width: 100%; height: 100%"></div>
</template>
<script>
import echarts from "echarts";
export default {
  name: "pieAlarm",
  mounted() {
    this.showMain();
  },
  methods: {
    showMain() {
      // 基于准备好的dom，初始化echarts实例

      var myChart = echarts.init(document.getElementById("main3"));
      var color = ["#C8E4FF", "#0483FF", "#0483FF"];

      var per = "%";

      // 指定图表的配置项和数据
      var option = {
        // color: [
        //   "rgb(248, 72, 3)",
        //   "rgb(254, 196, 0)",
        //   "rgb(0, 172, 255)",
        //   "#01e416",
        // ],

        title: {
          z: 8,
          textAlign: "center",
          textStyle: {
            color: "#f1f7fe",
            fontSize: 14,
            fontWeight: "normal",
          },
        },
        // tooltip: {  //提示框
        //   trigger: "item",
        //   formatter: " {a} <br/>{b} : {c} ({d}%) ",
        // },

        series: [
          {
            type: "pie",
            name: "故障处置数",

            selectedMode: "single",
            radius: ["60%", "65%"], //aa 内圈大小
            center: ["50%", "50%"],

            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    { offset: 0, color: "#0BC3FF" },
                    { offset: 1, color: "#000" },
                  ],
                  false
                ),
              },
            },
            hoverAnimation: false,
            label: {
              normal: {
                show: true,
                //aa中间文字颜色
                position: "center",

                formatter: function (a) {
                  return "{a|" + a.value + "}\n{b|故障总数}";
                },
                rich: {
                  a: {
                    fontSize: 23,
                    fontFamily: "impact",
                    color: "#FFEC16",
                  },
                  b: {
                    color: "#fff",
                    fontSize: 14,
                  },
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [{ value: 530, name: "故障总数" }],
          },
          {
            name: "故障处置数",
            splitNumber: 30,
            type: "pie",
            center: ["50%", "50%"],
            radius: ["80%", "95%"], //aa外圈大小
            avoidLabelOverlap: false,
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = [
                    {
                      c1: " rgb(248, 72, 3)", //管理
                      c2: "rgba(2,17,50,.8)",
                    },
                    {
                      c1: " rgb(254, 196, 0)", //实践
                      c2: "rgba(2,17,50,.8)",
                    },
                    {
                      c1: " rgb(0, 172, 255)", //操作
                      c2: "rgba(2,17,50,.8)",
                    },
                    {
                      c1: "#01e416", //操作
                      c2: "rgba(2,17,50,.8)",
                    },
                  ];
                  return new echarts.graphic.LinearGradient(0, 0, 0,1, [
                    {
                      //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                      offset: 0,
                      color: colorList[params.dataIndex].c1,
                    },
                    {
                      offset: 1,
                      color: colorList[params.dataIndex].c2,
                    },
                  ]);
                },
              },
            },
            hoverAnimation: false,
            label: {
              show: false, //aa 去掉指示折线
            },

            data: [
              { value: 60, name: "未处理数" },
              { value: 180, name: "审核未通过" },
              { value: 30, name: "超时完成" },
              { value: 260, name: "已完成数" },
            ],
          },

          {
            z: 10,
            name: "小环",
            type: "gauge",
            splitNumber: 20,
            radius: "95%", //aa发散圈的大小
            center: ["50%", "50%"],
            startAngle: 0,
            endAngle: 359.9999,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: "rgba(2,17,50,.8)",
                width: 4, // aa发散圈的粗细
                shadowBlur: 1,
                shadowColor: color[1],
              },
              length: 11, // aa发散圈的长度
              splitNumber: 1, //aa发散圈每一条间隔
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            detail: {
              show: false,
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>