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

    ref="fg11"
    v-loading="Loading"
  ></div>
</template>

<script>
import { getPwDurationLineChart } from "@/api/Distributionnetwork/transient/transient";
export default {
  props:{
        form:{
            type:Object,
            default:undefined
        },
        
    },
  data() {
    return {
      device: null,
      zoom: '', //图表焦点校验
      h: null,
      Loading: false,
      dataListX:[],
      dataListY:[],
    };
  },
  created() {},
  mounted() {

        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    this.$nextTick(() => {
      this.echarts();
    });
  },
  beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
  methods: {
    setHeight() {
      let domID1 = document.getElementById("left");
      setTimeout(()=>{
        domID1.style.width = (window.sessionStorage.getItem('appwidth') - 50)/3 +'px'
        domID1.style.height = (window.sessionStorage.getItem('appheight')-185)/2 + 'px'
      },0)

    },
    async echarts() {
      this.Loading= true;
      this.dataListX=[]
      this.dataListY=[]
      const data = await getPwDurationLineChart(this.form)
      data.data.forEach(item => {
        this.dataListX.push(item.name)
        this.dataListY.push(item.value)
      });
      this.Loading= false;
      let echarts = require("echarts");
      let domID1 = document.getElementById("left");
      setTimeout(()=>{
        domID1.style.width = (window.sessionStorage.getItem('appwidth') - 50)/3 +'px'
        domID1.style.height = (window.sessionStorage.getItem('appheight')-185)/2 + 'px'
      },0)
      let myChart = echarts.init(domID1);
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      myChart.clear()
      let option = {
        title: {
          text: "持续时间的概率分布函数 ",
          left: "center",
          top: 0,
          textStyle: {
              fontSize: 12,
              color: echartsColor.WordColor,
            },
        },
        grid: {
          top: "10%",
          left: "10%",
          bottom: "14%",
          right: "3%",
        },
        xAxis: {
          type: "category",
          data: this.dataListX,
          name: "暂降持续时间(s)",
          nameLocation: "middle",
          boundaryGap: false,
          nameTextStyle: {
            padding: 5,
            color:echartsColor.WordColor,
            
          },
          axisLine: {
              lineStyle: {
                color: echartsColor.thread,
              },
            },
            axisLabel: {
              color: echartsColor.WordColor,
            },

        },
        yAxis: {
          //   type: "value",
          name: "概率分布",
          nameGap: '20',
          nameTextStyle: {
              color: echartsColor.WordColor,
              padding: 0,
            },
              minInterval: 1,
              type: "value",
               axisLine: {
              show: true,
              lineStyle: {
                color: echartsColor.thread,
              },
              },
               axisLabel: {
              color: echartsColor.WordColor,
              },
            splitLine: {
              lineStyle: {
                // 使用深浅的间隔色
                color: [echartsColor.thread],
                type: "dashed",
                opacity: 0.5,
              },
            },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              color: "#fff",
              fontSize: 16,
            },
          },
          textStyle: {
            color: "#fff",
            fontStyle: "normal",
            opacity: 0.35,
            fontSize: 14,
          },
          backgroundColor: "rgba(0,0,0,0.35)",
          borderWidth: 0
        },
        series: [
          {
            data: this.dataListY,
            type: "line",
            itemStyle: {
              normal: { show: true, color: echartsColor.FigureColor[0] },
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                //数值样式
                color: echartsColor.WordColor,
              },
              fontSize: 12,
            },
          },
        ],
      };
      
      myChart.setOption(option)
window.echartsArr.push(myChart);
      
      // myChart.resize();
      let _this = this;
      _this.$erd.listenTo(_this.$refs.fg11, (element) => {
        _this.$nextTick(() => {
          myChart.resize();
        });
      });
      window.onresize = function () {
        myChart.resize();
      };
    },
  },
};
</script>

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