<template>
  <div
    id="echart"
    style="width: 100%"

    ref="fg4"
    v-loading="isLoading1"
  ></div>
</template>
<script>
export default {
  watch: {
    faMsg: {
      handler(val) {
        this.edata = this.faMsg;
       // console.log(this.edata, "jjjihhuy");
        this.province();
      },
    },
  },
  props: ["faMsg"],
  data() {
    return {
      edata: [],
      device: null,
      zoom: undefined, //图表焦点校验
      h: null,
      isLoading1: false,
      type: {},
      deptId: "",
      // echartsData: [], // 数据
      // echartsndArr: [], // 地区
      // echartsArr: [], // 数值
      // form:{
      //     deptIndex: "",
      //     monitorFlag: 2,
      //     powerFlag: 2,
      //     serverName:"event-boot",
      //     searchBeginTime: this.getCurrentMonthFirst(),
      //     searchEndTime: this.getNowFormatDate(),
      //     statisticalType: {},
      //     timeFlag:'',
      // },
    };
  },
  created() {
    //   this.form.deptIndex = JSON.parse(window.sessionStorage.getItem("Info")).deptId;
    //   this.getclassificationData();
    // this.test();
    // console.log(this.deptId.deptId)
  },
  mounted() {
    this.zoom = 1 / document.body.style.zoom;
    window.addEventListener("resize", () => {
      this.zoom = 1 / document.body.style.zoom;
    });
  },
  methods: {
    //echarts图
    async province() {
      this.isLoading1 = true;
      //   this.form.searchBeginTime=this.item[0]
      //   this.form.searchEndTime=this.item[1]
      //   this.form.deptIndex=this.deptIndex
      //   this.form.timeFlag=this.timeFlag
      let xData = [];
      let seriesData1 = [];
      let seriesData2 = [];
      this.edata.forEach((i) => {
        xData.push(i.manufactureId);
        seriesData1.push(i.terminalAbnormalCount);
        seriesData2.push(i.solveCount);
      });
     // console.log(xData, "kkosjiygg");
      // this.$emit('sendData',data)

      let echarts = require("echarts");
      let domID1 = document.getElementById("echart");
      setTimeout(() => {
        (domID1.style.width =
          window.sessionStorage.getItem("appwidth") - 40 + "px"),
          (domID1.style.height =
            window.sessionStorage.getItem("appheight") / 2 - 75 + "px");
      }, 0);
      let myChart = echarts.init(domID1);
      this.isLoading1 = false;
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      let option = {
        color: echartsColor.FigureColor,
        title: {
          text: "终端产家消缺统计",
          top: 20,
                    left: 'center',
          textStyle: {
            color: echartsColor.WordColor,
          },
          //
          //   top: 5,
        },
        // color:['#4169E1','#7FFFD4','#FFFFCD','#00FFFF'],
        // title:{
        //     text: '主网运行指标',
        //     left: "1%",
        //   //   top: 5,
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            label: {
              color: "#fff",
              fontSize: 16,
            },
          },
          backgroundColor: "rgba(0,0,0,0.35)",
          borderWidth: 0,
          textStyle: {
            align: "left",
            color: "#fff",
            fontStyle: "normal",
            opacity: 0.35,
            fontSize: 14,
          },
        },
        grid: {
                    left: '3%',
                    right: '2%',
                    top: '60',
                    bottom: '3%',
                    containLabel: true
                },
        // toolbox: {
        //   feature: {
        //     // dataView: { show: true, readOnly: false },
        //     // magicType: { show: true, type: ["line", "bar"] },
        //     // //restore: { show: true },
        //     saveAsImage: { show: true },
        //   },
        // },
        legend: {
          data: ["终端异常数量", "已消缺异常数量"],
          //icon: 'rect',
          right: 40,
                    top: 20,
          itemGap: 28,
          itemWidth: 16,
          itemHeight: 16,
          textStyle: {
            color: echartsColor.WordColor,
            rich: {
              a: {
                verticalAlign: "middle",
              },
            },

            padding: [2, 0, 0, 0], //[上、右、下、左]
          },
        },
        xAxis: [
          {
            //   name: '电压等级\n(监测点数)',// 给X轴加单位
            type: "category",
            data: xData,
            axisPointer: {
              type: "shadow",
            },
            itemStyle: {
              barWidth: "30",
            },
            axisLine: {
              lineStyle: {
                color: echartsColor.thread,
              },
            },
            axisLabel: {
              color: echartsColor.WordColor,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "(个)",
            nameTextStyle: {
              color: echartsColor.WordColor,
            },
            minInterval: 1,
            axisLine: {
              show: true,
              lineStyle: {
                color: echartsColor.thread,
              },
            },
            axisLabel: {
              color: echartsColor.WordColor,
            },
            splitLine: {
              lineStyle: {
                // 浣跨敤娣辨祬鐨勯棿闅旇壊
                color: [echartsColor.thread],
                type: "dashed",
                opacity: 0.5,
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: echartsColor.thread,
              },
            },
            axisLabel: {
              color: echartsColor.WordColor,
            },
          },
        ],
        series: [
          {
            name: "终端异常数量",
            type: "bar",
            data: seriesData1,
            barMaxWidth: "30px",
          },

          {
            name: "已消缺异常数量",
            type: "bar",
            data: seriesData2,
            barMaxWidth: "30px",
          },
        ],
      };
      myChart.setOption(option)
window.echartsArr.push(myChart);
      // myChart.resize();
      let _this = this;
      _this.$erd.listenTo(_this.$refs.fg4, (element) => {
        _this.$nextTick(() => {
          myChart.resize();
        });
      });
      window.onresize = function () {
        myChart.resize();
      };
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../../../../styles/comStyle.less");
</style>

