<template>
  <div class="main-content">
    <div class="title-content">
      <div class="box-between">
        <div>监控点运行情况趋势图</div>
      </div>
      <div class="time-condition">
        <el-radio-group v-model="timeRadio" size="small">
          <el-radio-button label="3">近七日</el-radio-button>
          <el-radio-button label="4">近一月</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="chart" ref="ChartFour"></div>
    <!-- <div v-if="statsEnterpriseList.length == 0">
      <div class="placeholderBox">
        <img src="@/assets/images/noData.png" alt="" />
        <p>暂无数据</p>
      </div>
    </div> -->
  </div>
</template>
<script>
import echarts from "echarts4";
export default {
  data() {
    return {
      timeRadio: "3",
    };
  },
  created() {},
  mounted() {
    this.centerOne();
  },
  methods: {
    centerOne() {
      let ageChart = echarts.init(this.$refs.ChartFour);
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["Email"],
          right: 20,
          top: 10
        },
        grid: {
          left: "3%",
          right: "3%",
          bottom: "0%",
          top: "15%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Email",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          }
        ],
      };
      ageChart.setOption(option);
      window.addEventListener("resize", () => {
        ageChart.resize();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.main-content {
  width: 100%;
  height: 100%;
  .title-content {
    display: flex;
    align-items: center;
    .box-between {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      margin-left: 16px;
      margin-right: auto;
      margin-top: 5px;
    }

    .box-between::before {
      content: "";
      width: 3px;
      height: 25px;
      background: #268dff;
      position: absolute;
      left: -8px;
    }
    .time-condition {
      margin-right: 16px;
      margin-top: 5px;
      :deep() {
        .el-radio-button__orig-radio:checked + .el-radio-button__inner {
          background-color: transparent;
          border: 1px solid #f28586;
          color: #f28586;
          box-shadow: none;
        }
      }
    }
  }
  .chart {
    width: 100%;
    height: 88%;
  }
}
</style>
