<template>
  <div ref="divRef" style="width: 400px; height: 400px;"></div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue"
import { init } from "@mhua/circle"
const divRef = ref()

onMounted(() => {
  init(divRef).update({
    background: 'rgba(0,0,0,.1)',
    value: 0.67,
    radius: 60,
    itemGap: 2,
    offsetAngle: -90,
    color: '#02c8ff',
    textList: [
      {
        value: '总体比例',
        fontSize: '16px',
      },
      {
        value: '90',
        fontSize: '28px',
        bold: "bold",
        offsetFormatter() {
          return {
            top: 24,
            left: 0,
          };
        },
      },
      {
        value: '%',
        fontSize: '10px',
        color: 'red',
        offsetFormatter(val, textList) {
          const item = textList[1];
          return {
            top: 28,
            left: item.measureText?.width! / 2 + val.measureText?.width! / 2,
          };
        },
      },
    ],
  });
})
</script>