<template>
  <div>
    <div
      id="initCaused"
      :style="`width:100%;height:100%;`"
    ></div>
  </div>
</template>
<script>
import { getStatistic } from "@/api/monitoringpointStatistics/echart";
export default {
  components: {},
  props: {
    item: {
      default: ["", ""],
    },
    timeFlag: {
      default: 0,
    },
  },
  data() {
    return {
      loading: true,
      zoom: "",
      //暂降原因模拟数据
      initCauseData: [],
      myChartes: null,
    };
  },
  created() {},
  mounted() {
    this.zoom = 1 / document.body.style.zoom;
    window.addEventListener("resize", () => {
      this.zoom = 1 / document.body.style.zoom;
    });
    this.$nextTick(() => {
      this.query();
    });
  },
  methods: {
    // 查询
    query() {
      this.loading = true;

      let form = {
        lineIndex: this.$store.state.user.lineID,
        startTime: this.item[0],
        endTime: this.item[1],
        timeFlag: this.timeFlag,
      };
      getStatistic(form).then((res) => {
        this.initCauseData = res.data.reason;
        this.initCause();
      });
    },
    //暂降原因
    initCause() {
      var reaArray = [];
      var valueArray = [];
      if (null === this.initCauseData) {
        reaArray = [
          "组合暂降",
          "变压器激磁",
          "短路故障",
          "大型感应电动机启动",
          "未明",
        ];
        valueArray = [
          { name: "组合暂降", value: 0 },
          { name: "变压器激磁", value: 0 },
          {
            name: "短路故障",
            value: 0,
          },
          { name: "大型感应电动机启动", value: 0 },
          { name: "未明", value: 0 },
        ];
      } else {
        this.initCauseData.reverse();
        for (var i = 0; i < this.initCauseData.length; i++) {
          reaArray.push(this.initCauseData[i].reason);
          var causeValue = {};
          causeValue.name = this.initCauseData[i].reason;
          causeValue.value = this.initCauseData[i].times;
          valueArray.push(causeValue);
        }
      }
      const echarts = require("echarts");
      let initCaused = document.getElementById("initCaused");
      this.myChartes = echarts.init(initCaused);
      setTimeout(() => {
        (initCaused.style.width =
          (window.sessionStorage.getItem("appwidth") - 220) / 3 + "px")(
          (initCaused.style.height =
            (window.sessionStorage.getItem("appheight") - 200) / 2 + "px")
        );
      }, 0);
      var option = {
        backgroundColor: "#fff", //背景色,
        animation: false,
        title: {
          text: "暂降原因",
          x: "center",
        },
      
        tooltip: {
          trigger: "item",
          axisPointer: {
                            type: "shadow",
                            label: {
                            color: "#fff",
                            fontSize: 16,
                            },
                        },
          textStyle: {
                            color: "#fff",
                            fontStyle: "normal",
                            opacity: 0.35,
                            fontSize: 14,
                      },
          backgroundColor: "rgba(0,0,0,0.35)",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: reaArray,
        },
        series: [
          {
            name: "暂降原因",
            type: "pie",
            radius: "70%",
            center: ["50%", "53%"],
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: true,
              },
            },
            lableLine: {
              normal: {
                show: false,
              },
              emphasis: {
                show: true,
              },
            },
            data: valueArray,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      this.myChartes.setOption(option)
window.echartsArr.push(this.myChartes);
      setTimeout(() => {
        this.myChartes.resize();
        this.loading = false;
      }, 200);
    },
  },

  computed: {},

  watch: {},
};
</script>
<style lang="scss" scoped></style>
