<template>
  <div class="p-echarts">
    <div class="pLegend">
      <i class="icon1"></i>按照策略执行
      <i class="icon2"></i>未按照策略执行
      <i class="icon3"></i>未按照策略执行，申诉通过
      <i class="icon4"></i>室内温度满足率
      <i class="icon5"></i>节能率
    </div>
    <div id="pCharts2" style="width: 100%;height: 100%;margin-top:20px;"></div>
  </div>
</template>

<script>
var echarts = require("echarts");
export default {
  data() {
    return {};
  },
  props: ["energyDataList"],
  mounted() {
    this.drawIt();
  },
  methods: {
    drawIt() {
      let myCharts = echarts.init(document.getElementById("pCharts2"));
      var colors = ["#34C724", "#8D9399", "#F54E45", "#00D6B9", "#0091FF"];
      var option = {
        color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross"
          }
        },
        grid: {
          right: "5%",
          left: "5%"
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true
            },
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#8D9399"
              }
            },
            axisLabel: {
              interval: 0 //代表显示所有x轴标签显示
            },
            data: [
              "11.01",
              "11.02",
              "11.03",
              "11.04",
              "11.05",
              "11.06",
              "11.07",
              "11.08",
              "11.09",
              "11.10",
              "11.12",
              "11.13",
              "11.14",
              "11.15",
              "11.16",
              "11.17",
              "11.18",
              "11.19",
              "11.20",
              "11.21",
              "11.22",
              "11.23",
              "11.24",
              "11.25",
              "11.26",
              "11.27",
              "11.28",
              "11.29",
              "11.30",
              "11.31"
            ]
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "节能率",
            axisLine: {
              lineStyle: {
                color: "#8D9399"
              }
            },
            splitLine: {
              show: false
            },
            min: 0,
            max: 25,
            position: "right",
            axisLabel: {
              formatter: "{value} ml"
            }
          },
          {
            type: "value",
            show: false,
            name: "",
            min: 0,
            max: 1,
            position: "right",
            offset: 80,
            axisLine: {
              show: false
            },
            axisLabel: {
              formatter: function() {
                return "";
              }
            }
          },
          {
            type: "value",
            name: "室内温度满足率",
            axisLine: {
              lineStyle: {
                color: "#8D9399"
              }
            },
            splitLine: {
              show: false
            },
            min: 0,
            max: 25,
            position: "left",

            axisLabel: {
              formatter: "{value} °C"
            }
          }
        ],
        series: [
          {
            name: "按照策略执行",
            type: "bar",
            barWidth: 30,
            data: [
              1,
              null,
              null,
              1,
              null,
              null,
              1,
              null,
              null,
              1,
              null,
              null,
              1,
              null,
              null,
              1,
              null,
              null,
              1,
              null,
              null,
              1,
              null,
              null,
              1,
              null,
              null,
              1,
              null,
              null,
              null
            ]
          },
          {
            name: "未按照策略执行",
            type: "bar",
            barWidth: 30,
            data: [
              null,
              1,
              1,
              null,
              1,
              null,
              null,
              1,
              null,
              null,
              1,
              null,
              null,
              1,
              null,
              null,
              1,
              null,
              null,
              1,
              null,
              null,
              1,
              null,
              null,
              1,
              null,
              null,
              1,
              null,
              null
            ]
          },
          {
            name: "未按照策略执行，申诉通过",
            type: "bar",
            barWidth: 30,
            data: [
              null,
              null,
              null,
              null,
              null,
              1,
              null,
              null,
              1,
              null,
              null,
              1,
              null,
              null,
              1,
              null,
              null,
              1,
              null,
              null,
              1,
              null,
              null,
              1,
              null,
              null,
              1,
              null,
              null,
              1,
              1
            ]
          },
          {
            name: "室内温度满足率",
            type: "line",
            yAxisIndex: 2,
            data: [
              2.0,
              2.2,
              3.3,
              4.5,
              6.3,
              10.2,
              20.3,
              23.4,
              23.0,
              16.5,
              12.0,
              6.2,
              2.0,
              2.2,
              3.3,
              4.5,
              6.3,
              10.2,
              20.3,
              23.4,
              23.0,
              16.5,
              12.0,
              6.2,
              2.0,
              2.2,
              3.3,
              4.5,
              6.3,
              10.2,
              20.3
            ]
          },
          {
            name: "节能率",
            type: "line",
            yAxisIndex: 2,
            data: [
              2.2,
              3.0,
              4.5,
              6.3,
              10.2,
              20.3,
              23.4,
              23.0,
              16.5,
              12.0,
              6.2,
              14.0,
              2.2,
              3.0,
              4.5,
              6.3,
              10.2,
              20.3,
              23.4,
              23.0,
              16.5,
              12.0,
              6.2,
              14.0,
              2.2,
              3.0,
              4.5,
              6.3,
              10.2,
              20.3,
              23.4
            ]
          }
        ]
      };
      myCharts.setOption(option);
      myCharts.on("click", param => {
        this.$router.push("/evaluate/evTwoLevelMenu");
        if (param.seriesName == "室内温度满足率") {
          this.$router.push({
            path: "/evaluate/evTwoLevelMenu",
            query: { type: 1 }
          });
        } else if (param.seriesName == "节能率") {
          this.$router.push({
            path: "/evaluate/evTwoLevelMenu",
            query: { type: 2 }
          });
        } else {
          this.$router.push({
            path: "/evaluate/evTwoLevelMenu",
            query: { type: 3 }
          });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.p-echarts {
  width: 100%;
  height: 100%;
  #pCharts2 {
    width: 100%;
    height: 100%;
  }
  .pLegend {
    font-size: 12px;
    color: #000000;
    text-align: center;
    margin-top: 20px;
    .icon1 {
      display: inline-block;
      width: 12px;
      height: 12px;
      background: rgba(52, 199, 36, 1);
      vertical-align: middle;
      margin-right: 3px;
    }
    .icon2 {
      display: inline-block;
      width: 12px;
      height: 12px;
      background: #f54e45;
      vertical-align: middle;
      margin-right: 3px;
      margin-left: 20px;
    }
    .icon3 {
      display: inline-block;
      width: 12px;
      height: 12px;
      background: #8d9399;
      vertical-align: middle;
      margin-right: 3px;
      margin-left: 20px;
    }
    .icon4 {
      display: inline-block;
      height: 6px;
      width: 16px;
      background: rgba(0, 145, 255, 1);
      border-radius: 3px;
      vertical-align: middle;
      margin-right: 3px;
      margin-left: 20px;
    }
    .icon5 {
      display: inline-block;
      height: 6px;
      width: 16px;
      background: #00d6b9;
      border-radius: 3px;
      vertical-align: middle;
      margin-right: 3px;
      margin-left: 20px;
    }
  }
}
</style>