<template>
  <div class="percentage" ref="chart"></div>
</template>

<script setup lang='ts'>
import { ref, onMounted, onUnmounted,getCurrentInstance,defineProps,watch } from 'vue'

const {proxy} = getCurrentInstance() as any;
const chart = ref(null)
const prop = defineProps({
  title: String,
  color: Array,
  percentage: Number
})
let pieChart = null
const init = ()=>{
    pieChart = proxy.$echarts.init(chart.value)
    let option = {
    title: {
      text: prop.title,
      show: true,
      textStyle: {
        color: "#fff",
        fontSize: 20,
      },
      padding:10
    },
    series: [
      {
        type: "gauge", // 仪表盘类型
        name: "系列名称", // 用于tooltip的显示
        startAngle: 90, // 仪表盘开始角度（设置背景圆的角度）
        endAngle: -270, // 仪表盘结束角度
        center: ["50%", "50%"], // 中心点（圆心坐标）
        radius: "50%", // 圆大小（仪表盘半径）
        clockwise: true, // 仪表盘刻度是否是顺时针增长
        // 仪表盘轴线相关配置
        axisLine: {
          show: true,
          roundCap: false, // 两端显示成圆形（背景环）
          clip: false, // 是否裁剪超出部分
          // 设置背景圆环样式
          lineStyle: {
            width: 20, // 圆环宽度
            color: [[1, "#002865"]], // 圆环背景色
          },
        },
        // 仪表盘指针
        pointer: {
          show: false,
        },
        // 进度设置
        progress: {
          show: true,
          overlap: false, // 多组数据时进度条是否重叠
          roundCap: true, // 是否在两端显示成圆形
          clip: false, // 是否裁掉超出部分
          // 进度条样式
          itemStyle: {
            borderWidth: 0,
            shadowColor: "",
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: prop.color[0], // 0% 处的颜色  '#02C77E'
                },
                {
                  offset: 1,
                  color: prop.color[1], // 100% 处的颜色  '#017770'
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        // 仪表盘分割线
        splitLine: {
          show: false,
        },
        // 刻度样式
        axisTick: {
          show: false,
        },
        // 刻度标签
        axisLabel: {
          show: false,
        },
        title: {
          show: false,
          fontSize: 24,
        },
        detail: {
          // width: 50,
          // height: 14,
          fontSize: 20,
          color: "auto",
        },
        data: [
          {
            value: prop.percentage,
            name: "345",
            title: {},
            detail: {
              // 中心title设置
              offsetCenter: ["0%", "0%"],
              color: "#01F8FF",
              formatter: "{value}%",
              // borderColor: '#01F8FF',
              // borderRadius: 20,
              // borderWidth: 1,
            },
          },
        ],
      },
    ],
  }
  pieChart.setOption(option)
}

watch(prop,(newVal,oldVal)=>{
  init()
})
onMounted(()=>{
  init()
})
</script>

<style scoped>
.percentage {
    width: 100%;
    height: 100%;
}
</style>
