<template>
  <div
    id="right"
    :style="`width:100%;height:${h};`"
    ref="fg"
    v-loading="isLoading"
  ></div>
</template>

<script>
import { getEventFeatureAmplitudeLineChart } from "@/api/Statistical-analysis/transientIndicators/transientIndicators";
export default {
  props:{
        form:{
            type:Object,
            default:undefined
        },
        
    },
  data() {
    return {
      device: null,
      zoom: undefined, //图表焦点校验
      h: null,
      isLoading: false,
      dataListX:[],
      dataListY:[],
    };
  },
  created() {},
  mounted() {
    this.zoom = window.devicePixelRatio;
    if (this.zoom == 1) {
      let heightd = document.getElementById("app-main-in").offsetHeight - 250;
      this.h = heightd / 2 + "px";
    }
    if (this.zoom == 1.25) {
      let heightd = document.getElementById("app-main-in").offsetHeight - 320;
      this.h = heightd / 2 + "px";
    }
    this.$nextTick(() => {
      this.echarts();
    });

    //   console.log(this.time[0],'1234567');
  },
  updated() {},
  methods: {
    async echarts() {
      this.isLoading = true;
      this.dataListX=[]
      this.dataListY=[]
      const data = await getEventFeatureAmplitudeLineChart(this.form)
      data.data.forEach(item => {
        this.dataListX.push(item.name)
        this.dataListY.push(item.value)
      });
      this.isLoading = false;
      let echarts = require("echarts");
      let domID1 = document.getElementById("right");
      let myChart = echarts.init(domID1);
      let option = {
        backgroundColor: "#f9f9f9", //地图背景色深蓝
        title: {
          text: "暂降幅值的概率分布函数 ",
          left: "center",
          top: 0,
        },
        grid: {
          top: "10%",
          left: "13%",
          bottom: "18%",
          right: "10%",
        },
        xAxis: {
          type: "category",
          data: this.dataListX,
          name: "暂降幅值",
          nameLocation: "middle",
          boundaryGap: false,
          nameTextStyle: {
            padding: 10,
          },
        },
        tooltip: {},
        yAxis: {
          name: "概率分布",
          nameLocation: "middle",
          nameTextStyle: {
            padding: 20,
          },
        },
        series: [
          {
            data: this.dataListY,
            type: "line",
          },
        ],
      };
      myChart.setOption(option)
window.echartsArr.push(myChart);
      // myChart.resize();
      let _this = this;
      _this.$erd.listenTo(_this.$refs.fg, (element) => {
        _this.$nextTick(() => {
          myChart.resize();
        });
      });
      window.onresize = function () {
        myChart.resize();
      };
    },
  },
};
</script>

<style lang="less" scoped></style>
