xy-frontend/src/echartsDemo.vue

<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轴最大值

      xData2: [], //横坐标
      lineData2: [], //纵坐标
      yMax2: "", //y轴最大值

      xData3: [], //横坐标
      lineData3: [], //纵坐标
      yMax3: "", //y轴最大值
    };
  },
  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轴最大值
          var timeSpan = 1; //时间间隔
          for (
            var i = 0;
            i < res.data.config.numberOfData * timeSpan;
            i = i + timeSpan
          ) {
            console.log(i);
            this.xData1.push(i);
          }
          //横坐标数据
          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轴最大值
          var timeSpan = 1; //时间间隔
          for (
            var i = 0;
            i < res.data.config.numberOfData * timeSpan;
            i = i + timeSpan
          ) {
            console.log(i);
            this.xData2.push(i);
          }
          //横坐标数据
          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轴最大值
          var timeSpan = 1; //时间间隔
          for (
            var i = 0;
            i < res.data.config.numberOfData * timeSpan;
            i = i + timeSpan
          ) {
            console.log(i);
            this.xData3.push(i);
          }
          //横坐标数据
          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: "图表一",
            left: "center",
          },
          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,
          },

          yAxis: {
            type: "value",
            // min: 20000,
            //max: this.yMax1,
          },
          series: [
            {
              data: this.lineData1,
              type: "line",
              smooth: true,
              symbol: "none",
              sampling: "lttb",
              itemStyle: {
                color: "rgb(255, 70, 131)",
              },
            },
          ],
        };
        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: "图表二",
            left: "center",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              animation: false,
            },
          },
          dataZoom: [
            {
              type: "slider",
              start: 0,
              end: 100,
            },
            {
              start: 0,
              end: 100,
            },
          ],
          xAxis: {
            type: "category",
            data: this.xData2, // 把时间组成的数组接过来，放在x轴上
            boundaryGap: false,
            showMaxLabel: true,
          },

          yAxis: {
            type: "value",
            // min: 20000,
            // max: this.yMax2,
          },
          series: [
            {
              data: this.lineData2,
              type: "line",
              smooth: true,
              symbol: "none",
              sampling: "lttb",
              itemStyle: {
                color: "rgb(255, 70, 131)",
              },
            },
          ],
        };
        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: "图表三",
            left: "center",
          },
          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,
          },

          yAxis: {
            type: "value",
            boundaryGap: [0, "100%"],
            // min: 20000,
            //max: this.yMax3,
          },
          series: [
            {
              data: this.lineData3,
              type: "line",
              showAllSymbol: true,
              smooth: true,
              symbol: "none",
              sampling: "lttb",
              itemStyle: {
                color: "rgb(255, 70, 131)",
              },
            },
          ],
        };
        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>