<template>
  <div class="echartsPage">
    <div class="echart-top">
      <el-card class="box-card">
        <div id="echart1" style="width: 100%; height: 100%"></div>
      </el-card>
      <el-card class="box-card">
        <div id="echart2" style="width: 100%; height: 100%"></div>
      </el-card>
    </div>
    <div class="echart-top">
      <el-card class="box-card">
        <div id="echart3" style="width: 100%; height: 100%"></div>
      </el-card>
      <el-card class="box-card">
        <div id="echart4" style="width: 100%; height: 100%"></div>
      </el-card>
    </div>
    <!-- <el-card>
      <el-tabs type="border-card" v-model="tabName" @tab-click="handleClick"
        ><el-tab-pane label="用户管理" name="用户管理"></el-tab-pane
        ><el-tab-pane label="配置管理" name="配置管理"></el-tab-pane></el-tabs
    ></el-card> -->
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      tabName: "配置管理",
      myChart1: "",
      myChart2: "",
      myChart3: "",
      myChart4: "",
    };
  },
  mounted() {
    this.init();
  },
  watch: {
    "$store.state.collapse"(val) {
      console.log(val);
      setTimeout(() => {
        //echarts得重绘方法
        this.myChart1.resize();
        this.myChart2.resize();
        this.myChart3.resize();
        this.myChart4.resize();
      }, 300);
    },
  },
  methods: {
    init() {
      this.getEchart1();
      this.getEchart2();
      this.getEchart3();
      this.getEchart4();
    },
    handleClick(value) {
      console.log("value", value);
      if (value.name === "用户管理") {
        this.getEchart1();
        this.getEchart2();
      } else {
        this.getEchart3();
      }
    },
    getEchart1() {
      this.$nextTick(() => {
        this.$echarts.init(document.getElementById("echart1")).dispose();
        this.myChart1 = this.$echarts.init(document.getElementById("echart1"));
        let option = {
          title: {
            text: "装置数量统计",
          },
          legend: { top: "bottom" },
          toolbox: {
            show: true,
          },
          series: [
            {
              name: "面积模式",
              type: "pie",
              radius: [50, 120],
              center: ["50%", "50%"],
              roseType: "area",
              itemStyle: { borderRadius: 8 },
              data: [
                { value: 40, name: "rose 1" },
                { value: 38, name: "rose 2" },
                { value: 32, name: "rose 3" },
                { value: 30, name: "rose 4" },
                { value: 28, name: "rose 5" },
                { value: 26, name: "rose 6" },
                { value: 22, name: "rose 7" },
                { value: 18, name: "rose 8" },
              ],
            },
          ],
        };
        this.myChart1.setOption(option);
        window.addEventListener("resize", () => {
          this.myChart1.resize();
        });
      });
    },
    getEchart2() {
      this.$nextTick(() => {
        this.$echarts.init(document.getElementById("echart2")).dispose();
        this.myChart2 = this.$echarts.init(document.getElementById("echart2"));
        let option = {
          title: {
            text: "隐患分类统计",
          },
          xAxis: {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
          yAxis: { type: "value" },
          series: [
            {
              data: [120, 200, 150, 80, 70, 110, 130],
              type: "bar",
              showBackground: true,
              backgroundStyle: { color: "rgba(180, 180, 180, 0.2)" },
            },
          ],
        };
        this.myChart2.setOption(option);
        window.addEventListener("resize", () => {
          this.myChart2.resize();
        });
      });
    },
    getEchart3() {
      this.$nextTick(() => {
        this.$echarts.init(document.getElementById("echart3")).dispose();
        this.myChart3 = this.$echarts.init(document.getElementById("echart3"));
        let option = {
          title: {
            text: "装置信息统计",
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
          yAxis: { type: "value" },
          series: [
            {
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: "line",
              areaStyle: {},
            },
          ],
        };
        this.myChart3.setOption(option);
        window.addEventListener("resize", () => {
          this.myChart3.resize();
        });
      });
    },
    getEchart4() {
      this.$nextTick(() => {
        this.$echarts.init(document.getElementById("echart4")).dispose();
        this.myChart4 = this.$echarts.init(document.getElementById("echart4"));
        let option = {
          title: {
            text: "装置在线统计",
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            top: "5%",
            left: "center",
          },
          series: [
            {
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: "#fff",
                borderWidth: 2,
              },
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                { value: 1048, name: "在线" },
                { value: 735, name: "离线" },
              ],
            },
          ],
        };
        this.myChart4.setOption(option);
        window.addEventListener("resize", () => {
          this.myChart4.resize();
        });
      });
    },
  },
};
</script>
<style lang="less">
.echartsPage {
  height: calc(100% - 32px);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  .echart-top {
    display: flex;
    height: 48%;
    justify-content: space-between;

    .el-card {
      width: 48%;
      height: 100%;
      .el-card__body {
        height: calc(100% - 40px);
      }
    }
  }
}
</style>
