<template>
  <div id="outlineechart" style="width: 100%"></div>
</template>
<script>
import { getechartsheight, getheight } from "../../../assets/commjs/common";
import yan from "@/assets/commjs/color";
export default {
  data() {
    return {
      echartsheight: undefined,
      device: 1,
      zoom: "",
    };
  },
  props: {
    xdata: {
      type: Array,
      default: undefined,
    },
    ydata: {
      type: Array,
      default: undefined,
    },
    title: {
      type: String,
      default: undefined,
    },
  },
  created() { },
  mounted() {
    this.zoom = 1 / document.body.style.zoom;
    this.setHeight()
    window.addEventListener('resize', this.setHeight)
    this.$nextTick(() => {
      this.evaluation();
    });
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setHeight)
  },
  methods: {
    setHeight() {
      let domID1 = document.getElementById("outlineechart");
      setTimeout(() => {
        (domID1.style.width =
          (window.sessionStorage.getItem("appwidth") - 10) / 2 + "px"),
          (domID1.style.height =
            (window.sessionStorage.getItem("appheight") - 80) / 2 + "px");
      }, 0);
    },
    evaluation() {
      const echarts = require("echarts");
      let domID1 = document.getElementById("outlineechart");
      setTimeout(() => {
        (domID1.style.width =
          (window.sessionStorage.getItem("appwidth") - 10) / 2 + "px"),
          (domID1.style.height =
            (window.sessionStorage.getItem("appheight") - 80) / 2 + "px");
      }, 0);
      var myChartes = echarts.init(domID1);
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      var option = {
        title: {
          text: "区域",
          left: "center",
          textStyle: {
            fontSize: 16,
            color: echartsColor.WordColor,
          },
          // subtext: ''
        },
        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 == 0.02) {
                tips += params[i].seriesName + ":暂无数据<br/>";
              } else {
                tips +=
                  params[i].seriesName +
                  ":" +
                  params[i].value +
                  "<br/>";
              }
            }
            return tips;
          },
          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,
        },
        grid: {
          left: "2%",
          right: "3%",
          bottom: "5px",
          containLabel: true,
        },
        // dataZoom: [
        //   {
        //     type: "inside",
        //     height: 13,
        //     start: 0,
        //     bottom: "10px",
        //     end: 100,
        //   },
        //   {
        //     start: 0,
        //     height: 13,
        //     bottom: "20px",
        //     end: 100,
        //   },
        // ],
        xAxis: [
          {
            type: "category",
            data: this.xdata,
            splitLine: {
              show: false,
            },
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                color: echartsColor.thread,
              },
            },
            axisLabel: {
              interval: 0,
              formatter: function (value) {
                value = value.replace('网公司', '')
                let last = value.substring(value.indexOf('('), value.length)
                value = value.substring(0, value.indexOf('(') - 1) + last

                console.log(value)
                console.log(value.length)
                var ret = "";//拼接加\n返回的类目项
                var maxLength = 6;//每项显示文字个数
                var valLength = value.length;//X轴类目项的文字个数
                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                if (rowN > 1)//如果类目项的文字大于5,
                {
                  for (var i = 0; i < rowN; i++) {
                    var temp = "";//每次截取的字符串
                    var start = i * maxLength;//开始截取的位置
                    var end = start + maxLength;//结束截取的位置
                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                    temp = value.substring(start, end) + "\n";

                    console.log(temp)
                    ret += temp; //凭借最终的字符串
                  }
                  return ret;
                } else {
                  return value;
                }
              }
            },
          },
        ],
        toolbox: {
          show: true,
          right: 50,
          feature: {
            //   dataZoom: {
            //     yAxisIndex: 'none'
            //   },
            //  dataView: { readOnly: false },
            //magicType: { type: ['line', 'bar'] },
            //restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        yAxis: {
          name: "单位(污染值)",
          type: "value",
          min: 0,
          max: 2,
          interval: 0.2,
          nameTextStyle: {
            color: echartsColor.WordColor,
          },
          minInterval: 1,
          axisLine: {
            show: true,
            lineStyle: {
              color: echartsColor.thread,
            },
          },
          axisLabel: {
            show: true,
            color: echartsColor.WordColor,
            formatter: function (value, index) {
              var texts = [];
              if (value === 1) {
                texts.push("1级");
              } else if (value === 1.2) {
                texts.push("2级");
              } else if (value === 1.4) {
                texts.push("3级");
              } else if (value === 1.6) {
                texts.push("4级");
              } else if (value === 2) {
                texts.push("5级");
              }
              return texts;
            },
          },
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              color: [echartsColor.thread],
              type: "dashed",
              opacity: 0.5,
            },
          },
        },
        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 (2 < params.value && params.value !== 0.02) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.zdContaminated,
                        },
                      ],
                      false
                    );
                  } else if (1.6 <= params.value && params.value < 2 && params.value !== 0.02) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.centerContaminated,
                        },
                      ],
                      false
                    );
                  } else if (1.2 <= params.value && params.value < 1.6 && params.value !== 0.02) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.qdContaminated,
                        },
                      ],
                      false
                    );
                  } else if (1 <= params.value && params.value < 1.2 && params.value !== 0.02) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.qwContaminated,
                        },
                      ],
                      false
                    );
                  } else if (
                    0 <= params.value &&
                    params.value < 1 &&
                    params.value !== 0.02
                  ) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.noContaminated,
                        },
                      ],
                      false
                    );
                  } else if (params.value == 0.02) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: "#999999",
                        },
                      ],
                      false
                    );
                  }
                },
              },
            },
            markLine: {
              silent: false,
              symbol: "circle",
              lineStyle: {
                color: "red",
                width: 1,
              },
              emphasis: {
                lineStyle: {
                  width: 1,
                },
              },
              data: [
                {
                  name: "等级:1级无污染",
                  yAxis: 1,
                  lineStyle: {
                    color: yan.ColorObject.noContaminated,
                  },
                  label: {
                    position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color: yan.ColorObject.noContaminated,
                    },
                  },
                },
                {
                  name: "等级:2级轻微污染",
                  yAxis: 1.2,
                  lineStyle: {
                    color: yan.ColorObject.qwContaminated,
                  },
                  label: {
                    position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color: yan.ColorObject.qwContaminated,
                    },
                  },
                },
                {
                  name: "等级:3级轻度污染",
                  yAxis: 1.4,
                  lineStyle: {
                    color: yan.ColorObject.qdContaminated,
                  },
                  label: {
                    position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color: yan.ColorObject.qdContaminated,
                    },
                  },
                },
                {
                  name: "等级:4级中度污染",
                  yAxis: 1.6,
                  lineStyle: {
                    color: yan.ColorObject.centerContaminated,
                  },
                  label: {
                    position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color: yan.ColorObject.centerContaminated,
                    },
                  },
                },
                {
                  name: "等级:5级重度污染",
                  yAxis: 2,
                  lineStyle: {
                    color: yan.ColorObject.zdContaminated,
                  },
                  label: {
                    position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color: yan.ColorObject.zdContaminated,
                    },
                  },
                },
              ],
            },
            data: this.ydata,
          },
        ],
      };
      myChartes.setOption(option)
      window.echartsArr.push(myChartes);
      setTimeout(() => {
        myChartes.resize();
      }, 100);
      window.onresize = function () {
        myChartes.resize();
      };
      //  setInterval(()=>{
      //     myChartes.resize()
      //  },100)
    },
  },
};
</script>
