<template>
  <el-card>
    <div id="main1" />
  </el-card>
</template>

<script setup>
import { onBeforeUnmount, onMounted } from "vue";
import { getListCheckType } from "@/request/index.js";
import * as echarts from "echarts";

let myChart1;
const fnGetData = async () => {
  const resData = await getListCheckType();
  fnInitEcharts(resData);
};
const fnInitEcharts = (data) => {
  myChart1 = echarts.init(document.querySelector("#main1"));
  const option = {
    title: {
      text: "清单检查类型统计",
      textStyle: {
        fontSize: "14",
        fontWeight: "700",
        color: "#fff",
      },
    },
    legend: {
      data: ["现场清单", "基础清单", "综合清单"],
      top: "0%",
      textStyle: {
        color: "#fff",
      },
    },
    grid: {
      left: "2%",
      right: "2%",
      bottom: "5%",
      top: "13%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: data.dates,
      axisLabel: {
        color: "#fff",
      },
      axisLine: {
        lineStyle: {
          color: "#102b60",
        },
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "#fff",
      },
      axisLine: {
        lineStyle: {
          color: "#102b60",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#102b60",
        },
      },
    },
    series: [
      {
        name: "现场清单",
        type: "line",
        data: data.xcqd,
        itemStyle: {
          color: "#3ca272",
          lineStyle: {
            color: "#3ca272",
          },
        },
      },
      {
        name: "基础清单",
        type: "line",
        data: data.jcqd,
        itemStyle: {
          color: "#5470c6",
          lineStyle: {
            color: "#5470c6",
          },
        },
      },
      {
        name: "综合清单",
        type: "line",
        data: data.zhqd,
        itemStyle: {
          color: "#ee6666",
          lineStyle: {
            color: "#ee6666",
          },
        },
      },
    ],
  };
  myChart1.setOption(option);
};
onMounted(() => {
  fnGetData();
  window.onresize = function () {
    myChart1 && myChart1.resize();
  };
});
onBeforeUnmount(() => {
  myChart1 = null;
});
</script>

<style scoped lang="scss">
#main1 {
  width: 100%;
  height: 280px;
}
</style>
