<template>
  <div id="wqts" style="width: 60vw; height: 50vw"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, reactive, nextTick } from "vue";
import * as echarts from "echarts";

onMounted(() => {
  hamdlegfChart();
});
function hamdlegfChart() {
  var m2R2Data = [
    {
      value: 2,
      itemStyle: { color: "#dd2024" },
    },
    {
      value: 4,
      itemStyle: { color: "#fb8734" },
    },
    {
      value: 6,
      itemStyle: { color: "#ecc617" },
    },
    {
      value: 10,
      itemStyle: { color: "#4399fc" },
    },
  ];

  if (document.getElementById("wqts")) {
    let myechart = echarts.init(document.getElementById("wqts"));
    myechart.setOption({
      title: [
        {
          text: 22 + "",
          subtext: "预警总数",
          textStyle: {
            fontSize: 16,
            color: "#4e5486",
          },
          subtextStyle: {
            fontSize: 10,
            color: "black",
          },
          textAlign: "center",
          x: "37.5%",
          y: "26%",
        },
      ],
      legend: {
        show: false,
      },
      series: [
        {
          type: "pie",
          center: ["40%", "38%"],
          radius: ["40%", "65%"],
          itemStyle: {
            borderWidth: 3,
            borderColor: "#fff",
          },
          clockwise: false, //饼图的扇区是否是顺时针排布
          avoidLabelOverlap: false,
          labelLine: {
            show: false,
          },
          label: {
            show: false,
          },
          data: m2R2Data,
        },
      ],
    });
    window.addEventListener("resize", () => {
      myechart.resize();
    });
  }
}
</script>

<style>
</style>