<template>
  <div id="xbh">
    <!-- <el-row :gutter="20"> -->
      <!-- <el-col :span="24"> -->
        <el-button  style="position:absolute;right:10px;z-index:20000"
                    type="text"
                    icon="el-icon-download"
                    title="生成图片"
                    @click="download"
                    >下载</el-button> 
        <div ref="xbtj"
          id="qualifiedechart"
          style="width: 100%; height: 100%"

        ></div>
      <!-- </el-col> -->
    <!-- </el-row> -->
  </div>
</template>
<script>
import yan from "@/assets/commjs/color";
export default {
  data() {
    return {
      zoom: "",
      voltageleve1: 0,
      tableheight: undefined,
      terminal: 0,
      interfere: 0,
      device: 1,
      myChartes:''
    };
  },
  props: {
    xdata: {
      type: Array,
      default: undefined,
    },
    ydata: {
      type: Array,
      default: undefined,
    },
    ydata2: {
      type: Array,
      default: undefined,
    },
    ydata3: {
      type: Array,
      default: undefined,
    },
    ydata4: {
      type: Array,
      default: undefined,
    },
    ydata5: {
      type: Array,
      default: undefined,
    },
    ydata6: {
      type: Array,
      default: undefined,
    },
    ydata7: {
      type: Array,
      default: undefined,
    },
    ydata8: {
      type: Array,
      default: undefined,
    },
    title: {
      type: String,
      default: undefined,
    },
    classvalue: {
      type: Number,
      default: undefined,
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.resizeEchartd()
    this.zoom = 1 / document.body.style.zoom;
    window.addEventListener("resize", () => {
      this.zoom = 1 / document.body.style.zoom;
      if(this.myChartes!==''){
        this.myChartes.resize();
      }
      
    });

    this.$nextTick(() => {
      this.qualifiedechart();
    });
  },
  methods: {
    resizeEchartd(){
      var elementResizeDetectorMaker = require("element-resize-detector")
      if(document.getElementById("xbh")){
     
      var erd = elementResizeDetectorMaker()
        erd.listenTo(document.getElementById("xbh"), (element) => {
        let  domeId=document.getElementById("xbh")
        let  domeId2=document.getElementById("qualifiedechart")
        domeId2.style.width= domeId.offsetWidth - 0 + "px"
       if(this.myChartes !==''){
        this.myChartes.resize();
       }
      });
      }
    },
    download() {
    // 转换成canvas
    html2canvas(document.getElementById("xbh"), {
      background:'#fff',
      scale: 1,
    }).then(function (canvas) {
      // 创建a标签，实现下载
      var creatIMg = document.createElement("a");
      creatIMg.download ="谐波统计.png"; // 设置下载的文件名，
      creatIMg.href = canvas.toDataURL(); // 下载url
      creatIMg.click();
      creatIMg.remove(); // 下载之后把创建的元素删除
    });
  },
    qualifiedechart() {
      const echarts = require("echarts");
      let domID1 = document.getElementById("qualifiedechart");
      setTimeout(() => {
        domID1.style.width =
        document.getElementById("xbh").offsetWidth -0+'px'
        domID1.style.height =
          (window.sessionStorage.getItem("appheight") - 50) / 2 + "px";
      }, 0);
      var myChartes = echarts.init(domID1);
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      var option = {
        title: {
          text: "监测点超标占比",
          left: "center",
          //subtext: '占比(%)',

          textStyle: {
            font: yan.EchartObject.zNamefontSize,
            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) {
            var tips = "";
            for (var i = 0; i < params.length; i++) {
              if (params[i].value == 1) {
                tips += params[i].name +'<br/>'
                + params[i].seriesName + ":暂无数据<br/>";
              } else {
                tips += params[i].name+'<br/>'
               +  params[i].seriesName + ":" + params[i].value + "<br/>";
              }
            }
            return tips;
          },
        },
        grid: yan.EchartObject.grid7,
        xAxis: [
          {
            name: yan.EchartObject.area,
            nameTextStyle: {
                            color: echartsColor.WordColor,
                            verticalAlign:'top',//标题位置
                            padding: [-5, 0, 0, 10]
                        },
            type: "category",
            data: this.xdata,
            splitLine: {
              show: false,
              lineStyle: {
                color: echartsColor.thread,
              },
            },
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              interval: 0, 
              textStyle: {
                fontFamily: yan.EchartObject.fontFamily,
                color: echartsColor.WordColor,
              },
              rotate: yan.rotate(this.xdata.length),
            },
            axisLine: {
              show: true,
              symbolOffset:25,//箭头距离x轴末端距离
                        lineStyle: {
                        shadowOffsetX:25,          
                        color: echartsColor.thread,
                        shadowColor:  echartsColor.thread,   //设置阴影的颜色
                        },
              symbol: ["none", "arrow"],
            },
          },
        ],
        // toolbox:yan.EchartObject.toolbox1,
        yAxis: [
          {
            name:yan.EchartObject.nuit1 ,
            nameTextStyle: {
                            color: echartsColor.WordColor,
                            verticalAlign:'top',//标题位置
                            padding: [-22, 0, 10, 0]
                        },
            min: 0,
            max: 100,
            type: "value",
            splitLine: {
              show: false,
              lineStyle: {
                color: echartsColor.thread,
              },
            },
            splitArea: {
              show: true,
            },
            axisLine: {
              show: true,
              symbolOffset:25,//箭头距离x轴末端距离
                        lineStyle: {
                        shadowOffsetY:-25,          
                        color: echartsColor.thread,
                        shadowColor:  echartsColor.thread,   //设置阴影的颜色
                        },
              symbol: ["none", "arrow"],
            },
            axisLabel: {
              color: echartsColor.WordColor,
            },
          },
        ],
        dataZoom: yan.EchartObject.dataZoom,
        series: [
          {
            name: "超标占比",
            barMaxWidth: yan.EchartObject.barMaxWidth,
            type: "bar",
            label: {
              normal: {
                show: false,
                position: "top",
              },
            },
            itemStyle: {
              normal: {
                // 随机显示
                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                // 定制显示（按顺序）
                color: function (params) {
                  if (params.value >= 90 && params.value !== 1) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.Integrity3,
                        },
                      ],
                      false
                    );
                  } else if (params.value >= 60 && params.value <= 90) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.Integrity2,
                        },
                      ],
                      false
                    );
                  } else if (params.value !== 1 && params.value <= 60) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.Integrity1,
                        },
                      ],
                      false
                    );
                  } else if (params.value == 1 ){
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: "#999999",
                        },
                      ],
                      false
                    );
                  }
                },
              },
            },
            markLine: {
              silent: false,
              symbol: "circle",
              lineStyle: {
                width: 1,
              },
              emphasis: {
                lineStyle: {
                  width: 1,
                },
              },
              data: [
                {
                  name: "",
                  yAxis: 100,
                  lineStyle: {
                    color: yan.ColorObject.Integrity3,
                  },
                  label: {
                    //position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color: yan.ColorObject.Integrity3,
                    },
                  },
                },
                {
                  name: "",
                  yAxis: 90,
                  lineStyle: {
                    color: yan.ColorObject.Integrity2,
                  },
                  label: {
                   // position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color: yan.ColorObject.Integrity2,
                    },
                  },
                },
                {
                  name: "",
                  yAxis: 60,
                  lineStyle: {
                    color: yan.ColorObject.Integrity1,
                  },
                  label: {
                    //position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color: yan.ColorObject.Integrity1,
                    },
                  },
                },
              ],
            },
            data: this.ydata,
          },
        ],
      };
      myChartes.setOption(option)
window.echartsArr.push(myChartes);
      setTimeout(() => {
        myChartes.resize();
      }, 100);

      let _this = this;
      _this.$erd.listenTo(_this.$refs.xbtj, (element) => {
        _this.$nextTick(() => {
          domID1.style.width=document.getElementById("xbh").offsetWidth -0+'px'
          myChartes.resize();
        });
      });
      window.onresize = function () {
        myChartes.resize();
      };
      //   setInterval(() => {
      //            myChartes.resize()
      //      },100);
    },
  },
};
</script>
<style scoped></style>
