<template>
  <div id="jcdfb">
  <div
    id="echart"
    :style="`height:100%;`"
    ref="fbfg"
  ></div>
</div>
</template>
<script>
import yan from "@/assets/commjs/color";
export default {
  props: {
    distributionData: {
      type: Array,
      default: undefined,
    },
    title: {
      type: String,
      default: "",
    },
    titleName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      device: null,
      zoom: undefined, //图表焦点校验
      h: null,
      isLoading1: false,
      myChart:''

      // forms: {
      //   deptIndex: "",
      //   monitorFlag: 2,
      //   powerFlag: 2,
      //   serverName: "event-boot",
      //   statisticalType: {},
      // },
    };
  },
  created() {},
  mounted() {
    this.resizeEchartZ()
    this.zoom = 1 / document.body.style.zoom;
    window.addEventListener("resize", () => {
      this.zoom = 1 / document.body.style.zoom;
      if(this.myChart!==''){
        this.myChart.resize()
      }
    });
  },
  methods: {
    async domain() {
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      this.isLoading1 = true;
      let xdata = [];
      let ydata = [];
      let echartData = this.distributionData;
      echartData.forEach((item) => {
        xdata.push(item.qy);
        ydata.push(item.jcd);
      });
      let echarts = require("echarts");
      let domID1 = document.getElementById("echart");
      setTimeout(() => {
        (domID1.style.width =
        document.getElementById("jcdfb").offsetWidth-0+'px'),
          (domID1.style.height =
            window.sessionStorage.getItem("appheight") - 430 + "px");
      }, 0);
      let myChart = echarts.init(domID1);
      myChart.clear()
      this.myChart = myChart
      // console.log("地区echartsData:",echartsData)
      this.isLoading1 = false;
      let option = {
        title: {
          text:
            this.titleName == "电压等级"
              ? "电压等级"
              : this.titleName == "终端厂家"
              ? "终端厂家"
              : this.titleName == "干扰源类型"
              ? "干扰源类型"
              : this.titleName == "电网拓扑"
              ? this.title
              : "",
          left: "center",
          top: 3,
          textStyle: {
            fontSize: yan.EchartObject.titleNamefontSize1,
            color: echartsColor.WordColor,
          },
        },
        tooltip: {
          //提示框组件
          trigger: "axis",
          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: function (params) {
           // console.log(params);
            var tips = "";
            for (var i = 0; i < params.length; i++) {
              tips += params[i].name + "</br/>";
              tips +=
                "监测点数" +
                ":" +
                "&nbsp" +
                "&nbsp" +
                params[i].value +
                "</br/>";
            }
            return tips;
          },
          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)",
          borderWidth: 0,
        },
        grid: yan.EchartObject.grid3,
        dataZoom: yan.EchartObject.dataZoom,

        xAxis: [
          {
            name:
              this.titleName == "电压等级"
                ? "(电压\n等级)"
                : this.titleName == "终端厂家"
                ? "(终端\n厂家)"
                : this.titleName == "干扰源类型"
                ? "(干扰\n源类型)"
                : this.titleName == "电网拓扑"
                ? "(区域)"
                : "", // 给X轴加单位
            type: "category",
            data: xdata,

            axisLine: {
              lineStyle: {
                color: echartsColor.thread,
              },
            },
            axisLabel: {
              interval:
                this.titleName == "电压等级"
                  ? 0
                  : this.titleName == "终端厂家"
                  ? 0
                  : this.titleName == "干扰源类型"
                  ? 1
                  : this.titleName == "电网拓扑"
                  ? 0
                  : "",
              textStyle: {
                fontFamily: yan.EchartObject.fontFamily,
                color: echartsColor.WordColor,
                fontSize: yan.EchartObject.xNamefontSize,
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "监测点数（个）",
            minInterval: 1,
            axisLabel: {
              formatter: "{value}",
              color: echartsColor.WordColor,
              fontSize: yan.EchartObject.yNamefontSize,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: echartsColor.thread,
              },
            },
            splitLine: {
              lineStyle: {
                // 使用深浅的间隔色
                color: [echartsColor.thread],
                type: "dashed",
                opacity: 0.5,
              },
            },
          },
        ],

        series: [
          {
            //   name: '暂降次数',
            type: "bar",
            data: ydata,
            barMaxWidth: yan.EchartObject.barMaxWidth,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: echartsColor.FigureColor[0], // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: echartsColor.FigureColor[0], // 100% 处的颜色
                    },
                  ],
                  false
                ),

                shadowBlur: 0,
              },
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                //数值样式
                color: echartsColor.WordColor,
              },

              fontSize: 12,
            },
          },
        ],
      };
      myChart.setOption(option)
window.echartsArr.push(myChart);
      let _this = this;
      _this.$erd.listenTo(_this.$refs.fbfg, (element) => {
        _this.$nextTick(() => {
          domID1.style.width = document.getElementById('jcdfb').offsetWidth -0 +"px"
          myChart.resize();
        });
      });
      // myChart.resize();
      setTimeout(() => {
        myChart.resize();
      }, 200);
    },
    resizeEchartZ(){
      var elementResizeDetectorMaker = require("element-resize-detector")
      var erd = elementResizeDetectorMaker()
      erd.listenTo(document.getElementById("jcdfb"), (element) => {
       // let  domeId=document.getElementById("ceshi")
        let  domeId2=document.getElementById("echart")
        domeId2.style.width= document.getElementById("jcdfb").offsetWidth-0+'px'
        if(this.myChart !==''){
          this.myChart.resize();
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../../../../styles/comStyle.less");
::v-deep .el-table .cell {
  text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
  padding: 10px;
}
</style>
