<template>
  <div id="alarm-pie" style="width: 100%; height: 100%"></div>
</template>

<script>
export default {
  name: "AlarmPie",
  data() {
    return {
      myChart: null,
    };
  },
  props: {
    pieData: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    init() {
      let title = "报警总量";
      let color = [
        "#0E7CE2",
        "#FF8352",
        "#E271DE",
        "#F8456B",
        "#00FFFF",
        "#4AEAB0",
      ];
      // let echartData = [
      //   {
      //     name: "环境报警",
      //     value: "3720",
      //   },
      //   {
      //     name: "人员违规",
      //     value: "2920",
      //   },
      //   {
      //     name: "环境监测",
      //     value: "2200",
      //   },
      //   {
      //     name: "污水排放",
      //     value: "1420",
      //   },
      //   {
      //     name: "设备异常",
      //     value: "1420",
      //   },
      // ];
      let echartData = this.pieData;
      let formatNumber = function(num) {
        let reg = /(?=(\B)(\d{3})+$)/g;
        return num.toString().replace(reg, ",");
      };
      let total = echartData.reduce((a, b) => {
        return a + b.value * 1;
      }, 0);
      let options = {
        title: [
          {
            text:
              "{name|" + title + "}\n{val|" + formatNumber(total) + "} " + "条",
            top: "center",
            left: "26%",
            textStyle: {
              rich: {
                name: {
                  fontSize: 14,
                  fontWeight: "normal",
                  color: "#666666",
                  padding: [10, 0],
                  textAlign: "center",
                },
                val: {
                  fontSize: 32,
                  fontWeight: "bold",
                  color: "#333333",
                },
              },
            },
          },
        ],
        color: color,
        tooltip: {
          trigger: "item",
          formatter: function(parms) {
            var str =
              parms.marker +
              "" +
              parms.data.name +
              "</br>" +
              "数量：" +
              parms.data.value +
              "条" +
              "</br>" +
              "占比：" +
              parms.percent +
              "%";
            return str;
          },
        },
        legend: {
          orient: "vertical",
          left: "65%",
          align: "left",
          top: "middle",
          icon: "circle",
          itemGap: 20,
          textStyle: {
            color: "#8C8C8C",
          },
        },
        series: [
          {
            type: "pie",
            radius: ["60%", "75%"],
            center: ["35%", "50%"],
            data: echartData,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                borderColor: "#fff",
                borderWidth: 5,
              },
            },
          },
        ],
      };
      this.myChart.setOption(options);
    },
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById("alarm-pie"));
    this.init();
    let that = this;
    // 监听resize
    window.addEventListener("resize", function() {
      that.myChart.resize();
    });
  },
  watch: {
    color(newVal) {
      if (newVal) {
        this.myChart.clear();
        this.init();
      }
    },
    pieData: {
      handler(newVal) {
        console.log(newVal);
        this.myChart.clear();
        this.init();
      },
    },
  },
};
</script>

<style scoped></style>
