<!-- 圆形进度图 -->
<template>
  <div :id="id" :class="className" :style="{ height, width }" />
</template>

<script setup lang="ts">
import * as echarts from "echarts";

const props = defineProps({
  id: {
    type: String,
    default: "circleChart",
    required: true,
  },
  className: {
    type: String,
    default: "chart",
  },
  width: {
    type: String,
    default: "200px",
  },
  height: {
    type: String,
    default: "200px",
  },
  color: {
    type: String,
    default: "#2f539b",
  },
  bgColor: {
    type: String,
    default: "#e6e8f9",
  },
  fontColor: {
    type: String,
    default: "#2f539b",
  },
  fontSize: {
    type: Number,
    default: 18,
  },
  fontWeight: {
    type: String,
    default: "bold",
  },
  roundCap: {
    type: Boolean,
    default: false,
  },
  lineWidth: {
    type: Number,
    default: 20,
  },
  data: {
    type: Number,
    default: 0,
    required: true,
  },
});

const options = {
  animation: true,
  title: {
    show: true,
    text: props.data + "%",
    x: "center",
    y: "center",
    textStyle: {
      fontSize: props.fontSize,
      fontWeight: props.fontWeight,
      color: props.fontColor,
    },
  },
  series: [
    {
      type: "gauge", // 仪表盘图
      startAngle: 90,
      endAngle: -270,
      min: 0,
      max: 1,
      radius: "90%",
      center: ["50%", "50%"],
      progress: {
        // 进度环
        roundCap: props.roundCap,
        show: true,
        width: props.lineWidth,
        itemStyle: {
          color: props.color,
        },
      },
      axisLine: {
        // 背景环
        roundCap: false,
        lineStyle: {
          width: props.lineWidth,
          color: [
            [0, props.bgColor],
            [1, props.bgColor],
          ],
        },
      },
      avoidLabelOverlap: true,
      label: { show: false },
      labelLine: {
        show: false,
      },
      pointer: { show: false },
      axisTick: { show: false },
      splitLine: { show: false },
      axisLabel: { show: false },
      detail: { show: false },
      data: [
        {
          value: props.data / 100, // 进度值，最高为1
        },
      ],
    },
  ],
};

onMounted(() => {
  const chart = echarts.init(
    document.getElementById(<string>props.id) as HTMLDivElement
  );
  chart.setOption(options);

  window.addEventListener("resize", () => {
    chart.resize();
  });
});
</script>
