<template>
  <div class="echartsBox">
    <div class="gropName">
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          v-for="item in qtOption"
          :label="item.groupName"
          :key="item.groupName"
          ><span v-if="item.groupName == 'H2'">{{ item.groupName }}(氢气)</span>
          <span v-if="item.groupName == 'CO'"
            >{{ item.groupName }}(一氧化碳)</span
          >
          <span v-if="item.groupName == 'CH4'">{{ item.groupName }}(甲烷)</span>
          <span v-if="item.groupName == 'C2H4'"
            >{{ item.groupName }}(乙烯)</span
          >
          <span v-if="item.groupName == 'C2H6'"
            >{{ item.groupName }}(乙烷)</span
          >
          <span v-if="item.groupName == 'C2H2'"
            >{{ item.groupName }}(乙炔)</span
          ></el-checkbox
        >
      </el-checkbox-group>
    </div>
    <div id="demo1"></div>
    <div id="demo2"></div>
    <div id="demo3"></div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "",
  data() {
    return {
      checkList: [], //选中勾选框
      qtOption: [], //气体数据
      myChart: "",
      xData1: [], //横坐标
      lineData1: [], //纵坐标
      yMax1: "", //y轴最大值
      channelCrests1: [], //气体数组
      dataPointer1: [], //气体点

      xData2: [], //横坐标
      lineData2: [], //纵坐标
      yMax2: "", //y轴最大值
      channelCrests2: [], //气体数组
      dataPointer2: [], //气体点

      xData3: [], //横坐标
      lineData3: [], //纵坐标
      yMax3: "", //y轴最大值
      channelCrests3: [], //气体数组
      dataPointer3: [], //气体点
    };
  },
  created() {
    this.getMenuData1();
    this.getMenuData2();
    this.getMenuData3();
  },
  mounted() {},
  watch: {},
  methods: {
    //图表1
    getMenuData1() {
      axios
        .get("/aa.json")
        .then((res) => {
          console.log("getMenuData", res);
          // this.qtOption = res.data.config.channels[0].crests;//气体
          // console.log(this.qtOption);
          this.lineData1 = res.data.data[0]; //纵坐标数据
          this.yMax1 = res.data.config.yMax; //y轴最大值

          this.channelCrests1 = res.data.config.channels[0].crests;

          var timeSpan = 1; //时间间隔
          for (
            var i = 0;
            i < res.data.config.numberOfData * timeSpan;
            i = i + timeSpan
          ) {
            this.xData1.push(i);
          }
          for (var i = 0; i < this.channelCrests1.length; i++) {
            this.dataPointer1.push({
              name: this.channelCrests1[i].groupName,
              label: this.channelCrests1[i].crestNo + "",
              xAxis: this.channelCrests1[i].crestTime,
              yAxis: this.lineData1[this.channelCrests1[i].crestTime],
            });
          }
          console.log(this.dataPointer1);

          //横坐标数据
          this.getEchart1();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //图表2
    getMenuData2() {
      axios
        .get("/bb.json")
        .then((res) => {
          this.lineData2 = res.data.data[0]; //纵坐标数据
          this.yMax2 = res.data.config.yMax; //y轴最大值

          this.channelCrests2 = res.data.config.channels[0].crests;
          var timeSpan = 1; //时间间隔
          for (
            var i = 0;
            i < res.data.config.numberOfData * timeSpan;
            i = i + timeSpan
          ) {
            this.xData2.push(i);
          }
          for (var i = 0; i < this.channelCrests2.length; i++) {
            this.dataPointer2.push({
              name: this.channelCrests2[i].groupName,
              label: this.channelCrests2[i].crestNo + "",
              xAxis: this.channelCrests2[i].crestTime,
              yAxis: this.lineData2[this.channelCrests2[i].crestTime],
            });
          }
          console.log(this.dataPointer2);

          //横坐标数据
          //横坐标数据
          this.getEchart2();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //图表3
    getMenuData3() {
      axios
        .get("/cc.json")
        .then((res) => {
          this.lineData3 = res.data.data[0]; //纵坐标数据
          this.yMax3 = res.data.config.yMax; //y轴最大值
          this.channelCrests3 = res.data.config.channels[0].crests;
          var timeSpan = 1; //时间间隔
          for (
            var i = 0;
            i < res.data.config.numberOfData * timeSpan;
            i = i + timeSpan
          ) {
            this.xData3.push(i);
          }
          console.log(this.lineData3);
          for (var i = 0; i < this.channelCrests3.length; i++) {
            this.dataPointer3.push({
              name: this.channelCrests3[i].groupName,
              label: this.channelCrests3[i].crestNo + "",
              xAxis: this.channelCrests3[i].crestTime,
              yAxis: this.lineData3[this.channelCrests3[i].crestTime],
            });
          }
          console.log(this.dataPointer3);

          //横坐标数据
          this.getEchart3();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //装置数量统计
    getEchart1() {
      this.$nextTick(() => {
        let that = this;
        that.myChart = this.$echarts.init(document.getElementById("demo1"));
        let option = {
          title: {
            text: "图谱1",
            left: "left",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              animation: false,
            },
          },
          dataZoom: [
            {
              type: "inside",
              start: 0,
              end: 100,
            },
            {
              start: 0,
              end: 100,
            },
          ],
          xAxis: {
            type: "category",
            data: this.xData1, // 把时间组成的数组接过来，放在x轴上
            boundaryGap: false,
            showMaxLabel: true,
            name: "单位:s", // 这个设置只在末尾添加单位
          },

          yAxis: {
            type: "value",
            scale: true,
            name: "单位:mV", //  你的单位写在这就可以

            nameTextStyle: {
              //  单位样式
              color: "#000", //  字体颜色
              fontSize: 10, //  字体大小
              padding: [0, 28, 4, 0], //  内填充
            },
          },
          series: [
            {
              data: this.lineData1,
              type: "line",
              smooth: true,
              symbol: "none",
              sampling: "lttb",
              itemStyle: {
                color: "rgb(255, 70, 131)",
              },
              markPoint: {
                data: this.dataPointer1,
                symbol: "pin",
                symbolSize: 18,
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      position: "top",
                      distance: 0,
                      formatter: function (params) {
                        console.log(params);
                        return params.data.label + ":" + params.name;
                      },
                    },
                  },
                },
              },
            },
          ],
        };
        that.myChart.setOption(option);
        window.addEventListener("resize", () => {
          that.myChart.resize();
        });
      });
    },
    getEchart2() {
      this.$nextTick(() => {
        let that = this;
        that.myChart = this.$echarts.init(document.getElementById("demo2"));
        let option = {
          title: {
            text: "图谱2",
            left: "left",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              animation: false,
            },
          },
          dataZoom: [
            {
              type: "inside",
              start: 0,
              end: 100,
            },
            {
              start: 0,
              end: 100,
            },
          ],
          xAxis: {
            type: "category",
            data: this.xData2, // 把时间组成的数组接过来，放在x轴上
            boundaryGap: false,
            showMaxLabel: true,
            name: "单位:s", // 这个设置只在末尾添加单位
          },

          yAxis: {
            type: "value",
            scale: true,
            name: "单位:mV", //  你的单位写在这就可以

            nameTextStyle: {
              //  单位样式
              color: "#000", //  字体颜色
              fontSize: 10, //  字体大小
              padding: [0, 28, 4, 0], //  内填充
            },
          },
          series: [
            {
              data: this.lineData2,
              type: "line",
              smooth: true,
              symbol: "none",
              sampling: "lttb",
              itemStyle: {
                color: "rgb(255, 70, 131)",
              },
              markPoint: {
                data: this.dataPointer2,
                symbol: "pin",
                symbolSize: 18,
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      position: "top",
                      distance: 0,
                      formatter: function (params) {
                        console.log(params);
                        return params.data.label + ":" + params.name;
                      },
                    },
                  },
                },
              },
            },
          ],
        };
        that.myChart.setOption(option);
        window.addEventListener("resize", () => {
          that.myChart.resize();
        });
      });
    },
    getEchart3() {
      this.$nextTick(() => {
        let that = this;
        that.myChart = this.$echarts.init(document.getElementById("demo3"));
        let option = {
          title: {
            text: "图谱3",
            left: "left",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              animation: false,
            },
          },
          dataZoom: [
            {
              type: "inside",
              start: 0,
              end: 100,
            },
            {
              start: 0,
              end: 100,
            },
          ],
          xAxis: {
            type: "category",
            data: this.xData3, // 把时间组成的数组接过来，放在x轴上
            boundaryGap: false,
            showMaxLabel: true,
            name: "单位:s", // 这个设置只在末尾添加单位
          },

          yAxis: {
            type: "value",
            scale: true,
            show: true, //   前提：  y轴肯定是要显示的
            name: "单位:mV", //  你的单位写在这就可以

            nameTextStyle: {
              //  单位样式
              color: "#000", //  字体颜色
              fontSize: 10, //  字体大小
              padding: [0, 28, 4, 0], //  内填充
            },
          },
          series: [
            {
              data: this.lineData3,
              type: "line",
              smooth: true,
              symbol: "none",
              sampling: "lttb",
              itemStyle: {
                color: "rgb(255, 70, 131)",
              },
              markPoint: {
                data: this.dataPointer3,
                symbol: "pin",
                symbolSize: 18,
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      position: "top",
                      distance: 0,
                      formatter: function (params) {
                        console.log(params);
                        return params.data.label + ":" + params.name;
                      },
                    },
                  },
                },
              },
            },
          ],
        };
        that.myChart.setOption(option);
        window.addEventListener("resize", () => {
          that.myChart.resize();
        });
      });
    },
  },
};
</script>
<style lang="less">
.echartsBox {
  height: calc(100% - 32px);
  padding: 16px;
  display: flex;
  flex-direction: column;
  // justify-content: space-around;
  #demo1,
  #demo2,
  #demo3 {
    height: 400px;
    width: 80%;
  }
  .gropName {
    .el-checkbox-group {
      display: flex;
      flex-direction: column;
      .el-checkbox {
        height: 40px;
        line-height: 40px;
      }
    }
  }
}
</style>
