<template>
  <div class="wrap">
    <div class="title">隐患整改情况统计</div>
    <div id="main3"></div>
  </div>
</template>
<script setup>
import { onMounted } from "vue";
import * as echarts from "echarts";
let myChart1;

const annualTraining = () => {
  myChart1 = echarts.init(document.querySelector("#main3"));
  const option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      bottom: "0%",
      left: "center",
      textStyle: {
        color: "#FFFFFF",
      },
    },
    grid: {
      left: "0%",
      right: "8%",
      bottom: "0%",
      top: "35%",
      containLabel: true,
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 2,
        },
        label: {
          show: false,
          position: "center",
          textStyle: {
            color: "#FFFFFF",
          },
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 16,
          },
        },
        labelLine: {
          show: false,
        },

        data: [
          { value: 1048, name: "未整改" },
          { value: 735, name: "已整改" },
          { value: 484, name: "已验收" },
          { value: 300, name: "已过期" },
        ],
      },
    ],
  };
  myChart1.setOption(option);
};
onMounted(() => {
  annualTraining();
});
</script>

<style scoped lang="scss">
.wrap {
  width: 50%;
  .title {
    font-size: 14px;
    font-weight: bold;
  }
  #main3 {
    width: 330px;
    height: 350px;
  }
}
</style>