<template>
  <!-- 监控日志 -->
  <div class="jktjDetail form-clues">
    <!-- 头部搜索 -->
    <el-form
      ref="form"
      :model="form"
      :inline="true"
      class="from-clues-header"
      label-width="100px"
    >
      <el-row class="rows">
        <el-col :span="8">
          <el-date-picker
            v-model="valueTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-col>
          <!-- 操作按钮 -->
          <el-col :span="3" class="btnColRight">
            <btn nativeType="cz" @click="resetForm">重置</btn>
            <btn nativeType="cx">查询</btn>
          </el-col>
      </el-row>
    </el-form>
    <!-- 表格 -->
    <div class="form-clues-content echarts-box">
      <div id="myChart" class="chart"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "jktj",
  data() {
    return {
      // 开始结束日期限制
      pickerOptionsStart: {
        disabledDate: (time) => {
          if (this.form.endTime) {
            return time.getTime() >= new Date(this.form.endTime).getTime();
          }
        },
      },
      // 结束日期限制
      pickerOptionsEnd: {
        disabledDate: (time) => {
          if (this.form.startTime) {
            return time.getTime() <= new Date(this.form.startTime).getTime();
          }
        },
      },
      // 搜索表单
      valueTime: "",
      form: {
        startTime: "",
        endTime: "",
      },
    };
  },
  mounted() {
    // 初始化图表
    this.echartInit();
  },
  methods: {
    // 重置
    resetForm() {
      this.form = {
        startTime: "",
        endTime: "",
      };
    },
    echartInit() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
        title: {
          show: true,
          text: "汉中市接入数量与上报数量统计(单位:个)\n(2022年02月05日~2022年03月07日)",
          left: "center",
          textStyle: {
            fontSize: 20,
            lineHeight: 30,
            height: 60,
            color: "#b6b5b5",
          },
        },
        legend: {
          data: [
            "接入成功数量",
            "接入失败数量",
            "上报成功数量",
            "上报失败数量",
          ],
          top: 80,
          textStyle: {
            fontSize: 20,
            lineHeight: 30,
            height: 60,
            color: "#777",
          },
        },
        tooltip: {
          show: true,
          trigger: "axis",
           textStyle: {
      fontSize: 20 // 字体大小
    },
     extraCssText: 'width:220px;height:160px;' // 背景色
        },
        grid: {
          top: 120,
        },
        xAxis: [
          {
            type: "category",
            data: ["汉台区", "南郑区", "城固县", "洋县", "西乡县"],
            axisLabel: {
              textStyle: {
                show: true,
                color: "#fff",
                fontSize: "20",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: {
                show: true,
                color: "#fff",
                fontSize: "20",
              },
            },
          },
        ],
        series: [
          {
            name: "接入成功数量",
            type: "bar",
            data: [1000, 1500, 2000, 500, 4000],
          },
          {
            name: "接入失败数量",
            type: "bar",
            data: [900, 500, 3200, 800, 4500],
          },
          {
            name: "上报成功数量",
            type: "bar",
            data: [1000, 1500, 2000, 500, 4000],
          },
          {
            name: "上报失败数量",
            type: "bar",
            data: [900, 500, 3200, 800, 4500],
          },
        ],
      });
    },
  },
};
</script>
<style scoped lang="scss">
@import "~@/styles/public.scss";

.jktjDetail {
  height: 100%;
  display: flex;
  flex-direction: column;
.rows {
    margin-left: 100px;
  }
  .echarts-box {
    display: flex;
    justify-content: center;
    height: 500px;

    .chart {
      width: 100%;
      height: 100%;
    }
  }

  .form-clues-content {
    flex: 1;
    height: 100%;
    color: #b6b5b5
  }
}
</style>
<style scoped lang="scss">
@import "~@/styles/public.scss";
</style>