<template>
  <div>
    <div
      id="initTyped"
      :style="`width:100%;height:100%;`"
    ></div>
  </div>
</template>
<script>
import { getStatistic } from "@/api/monitoringpointStatistics/echart";
export default {
  components: {},
  props: {
    item: {
      default: ["", ""],
    },
  },
  data() {
    return {
      loading: true,
      zoom: "",
      //暂降类型模拟数据
      initTypeData: [],
      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],
      };
      getStatistic(form).then((res) => {
        this.initTypeData = res.data.types;
        this.initType();
      });
    },
    //暂降类型
    initType() {
      var typeArray = [];
      var valueArray = [];
      if (null === this.initTypeData) {
        typeArray = ["单相接地", "两相接地", "三相短路", "相间故障", "未知"];
        valueArray = [
          { name: "单相接地", value: 0 },
          { name: "两相接地", value: 0 },
          { name: "三相短路", value: 0 },
          {
            name: "相间故障",
            value: 0,
          },
          { name: "未知", value: 0 },
        ];
      } else {
        for (var i = 0; i < this.initTypeData.length; i++) {
          typeArray.push(this.initTypeData[i].type);
          var typeValue = {};
          typeValue.name = this.initTypeData[i].type;
          typeValue.value = this.initTypeData[i].times;
          valueArray.push(typeValue);
        }
      }
      const echarts = require("echarts");
      let initTyped = document.getElementById("initTyped");
      this.myChartes = echarts.init(initTyped);
      setTimeout(() => {
        (initTyped.style.width =  (window.sessionStorage.getItem("appwidth") - 220) / 3 + "px"),
          (initTyped.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: typeArray,
        },
        series: [
          {
            name: "暂降类型",
            type: "pie",
            radius: "70%",
            center: ["50%", "60%"],
            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>
