<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="24">
        <div
          id="qualifiedechart"
          :style="'width:100%;height:45vh'"
        ></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import yan from "../../../assets/commjs/color";
export default {
  data() {
    return {
      voltageleve1: 0,
      tableheight: undefined,
      terminal: 0,
      interfere: 0,
      device: 1,
      voltageleveloption: [
        { value: 0, label: "全部" },
        { value: 1, label: "0.38kV" },
        { value: 2, label: "0.45kV" },
        { value: 3, label: "6kV" },
        { value: 4, label: "10kV" },
        { value: 5, label: "20kV" },
        { value: 6, label: "110kV" },
        { value: 7, label: "220kV" },
        { value: 8, label: "500kV" },
        { value: 9, label: "750kV" },
        { value: 10, label: "1000kV" },
      ],
      terminaloption: [
        { value: 0, label: "全部" },
        { value: 1, label: "南京灿能电力" },
      ],
      interfereoption: [
        { value: 0, label: "全部" },
        { value: 1, label: "非线性负荷" },
        { value: 2, label: "电气化铁路" },
        { value: 3, label: "电加热负荷" },
        { value: 4, label: "整流装置" },
        { value: 5, label: "中频炉" },
      ],
    };
  },
  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.device = window.devicePixelRatio;
    
    this.qualifiedechart();
  },
  methods: {
    qualifiedechart() {
      const echarts = require("echarts");
      var myChartes = echarts.init(document.getElementById("qualifiedechart"));
      var option = {
        title: {
          text: "区域监测点超标占比",
          left: "center",
          //subtext: '占比(%)',

          textStyle: {
            font: 12,
          },
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            var tips = "";
            tips +=
               
              params[0].name +
              "个</br/>";
            for (var i = 0; i < params.length; i++) {
              if (params[i].value == 1.33333) {
                tips += params[i].seriesName + ":暂无数据<br/>";
              } else {
                tips += params[i].seriesName + ":" + params[i].value.toFixed(2) + "%<br/>";
              }
            }
            return tips;
          },
        },
        grid: {
          left: "10px",
          right: "40px",
          bottom: "20px",
          containLabel: true,
        },
        xAxis: [
          {
            name: "区域",
            type: "category",
            data: this.xdata,
            splitLine: {
              show: false,
            },
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              textStyle: {
                fontFamily: "dinproRegular",
                color: "#000",
              },
              rotate:0,
            },
            axisLine: {
              show: true,
              symbol: ["none", "arrow"],
            },
          },
        ],
        toolbox: {
          show: true,
          // feature: {
          //   saveAsImage: { show: true },
          //   // dataZoom: {
          //   //      yAxisIndex: 'none'
          //   // },
          //   ////restore: {},
          //   //mark : {show: true},
          //   // magicType : {show: true, type: ['line', 'bar']}
          // },
        },
        yAxis: [
          {
            name: "占比(%)",
            min: 0,
            max: 100,
            type: "value",
            splitLine: {
              show: false,
            },
            splitArea: {
              show: true,
            },
            axisLine: {
              show: true,
              symbol: ["none", "arrow"],
            },
          },
        ],
        series: [
          {
            name: "占比",
            barMaxWidth: 30,
            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.33333) {
                    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.33333 && params.value <= 60) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.Integrity1,
                        },
                      ],
                      false
                    );
                  } else if (params.value == 1.33333) {
                    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);
      window.onresize = function () {
        myChartes.resize();
      };
      //   setInterval(() => {
      //            myChartes.resize()
      //      },100);
    },
  },
  beforeDestroy(){
    this.$destroy()
    this.voltageleve1 =null
    this.tableheight = null
    this.terminal=null
    this.interfere=null
    this.device=null
    this.voltageleveloption=null
    this.terminaloption=null
    this.interfereoption=null
    window.gc()
  },
};
</script>
<style scoped></style>

zd
