<template>
  <v-chart class="" :option="option" />
</template>

<script setup>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart } from "echarts/charts";
import { TitleComponent, PolarComponent, TooltipComponent } from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { ref, provide } from "vue";

use([CanvasRenderer, BarChart, TitleComponent, PolarComponent, TooltipComponent]);
provide(THEME_KEY, "default");

const value = 72; // 当前进度
const max = 100;  // 总数

const option = ref({
  title: {
    text: `{num|${value}}{percent|%}`,
    textStyle: {
      rich: {
        num: {
          fontSize: 24, // 数字字号
          fontWeight: 'bold',
          color: '#1D86FF',
        },
        percent: {
          fontSize: 14, // % 的字号
          fontWeight: 'bold',
          color: '#1D86FF',
          padding: [0, 0, 0, 2],
        }
      }
    },
    itemGap: 1,
    left: 'center',
    top: 'center',
  },

  angleAxis: {
    max: max,
    clockwise: false,
    show: false,
  },
  radiusAxis: {
    type: 'category',
    show: false,
  },
  polar: {
    center: ['50%', '50%'],
    radius: '170%',
  },
  series: [
    {
      type: 'bar',
      data: [
        {
          value: value,
          itemStyle: {
            color: {
              type: 'linear',
              x: 1, y: 0, x2: 0, y2: 0,
              colorStops: [
                { offset: 0, color: '#1D86FF' },
                { offset: 1, color: '#6FB6FF' }
              ]
            }
          }
        }
      ],
      coordinateSystem: 'polar',
      roundCap: true,
      barWidth: 10,
      barGap: '-100%',
      z: 2,
    },
    {
      // 底色环
      type: 'bar',
      data: [
        {
          value: max,
          itemStyle: {
            color: '#e8f2ff',
          }
        }
      ],
      coordinateSystem: 'polar',
      roundCap: true,
      barWidth: 10,
      barGap: '-100%',
      z: 1,
    }
  ]
});
</script>
