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

      ref="fg19"
      v-loading="isLoading"
    ></div>
  </template>
  
  <script>
  import { getPwFeatureAmplitudeLineChart } from "@/api/Distributionnetwork/transient/transient";
  export default {
    props:{
        form:{
            type:Object,
            default:undefined
        },
        
    },
    data() {
      return {
        device: null,
        zoom: undefined, //图表焦点校验
        h: null,
        isLoading: false,
        dataListX:[],
        dataListY:[],
      };
    },
    created() {},
    mounted() {
      window.addEventListener('resize', this.setHeight)
      this.$nextTick(() => {
        this.echarts();
      });
  
      //   console.log(this.time[0],'1234567');
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
  methods: {
    setHeight() {
      let domID1 = document.getElementById("right");
        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.isLoading = true;
        this.dataListX=[]
        this.dataListY=[]
        const data = await getPwFeatureAmplitudeLineChart(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");
        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);
        let option = {
          //backgroundColor: "#f9f9f9", //地图背景色深蓝
          title: {
            text: "暂降幅值的概率分布函数 ",
            left: "center",
            top: 0,
            textStyle: {
              fontSize: 16,
              color: echartsColor.WordColor,
            },
          },
          grid: {
            top: "10%",
            left: "10%",
            bottom: "14%",
            right: "3%",
          },
          xAxis: {
            type: "category",
            data: this.dataListX,
            name: "暂降幅值",
            nameLocation: "middle",
            nameTextStyle: {
            padding: 5,
            color:echartsColor.WordColor
          },
          axisLine: {
              lineStyle: {
                color: echartsColor.thread,
              },
            },
            axisLabel: {
              color: echartsColor.WordColor,
            },
          },
          tooltip: {
            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
          },
          yAxis: {
            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,
              },
            },
            
          },
          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.fg19, (element) => {
          _this.$nextTick(() => {
            myChart.resize();
          });
        });
        window.onresize = function () {
          myChart.resize();
        };
      },
    },
  };
  </script>
  
  <style lang="less" scoped></style>
  