js手写环形进度条

使用效果示例:（圆弧部分）

组件使用

字段	描述	是否必填	类型	默认值
color	圆弧颜色	否	string	#409eff
value	圆弧的值	是	number	null
bShowRadius	是否显示圆角	否	boolean	true
sTrokeWidth	圆弧的线宽	否	number	4

<processBox :value="progress" :color="lineColor" :bShowRadius="false"/>

组件代码

<template>
    <div class="process-wrap" :id="id">
        <svg width="100%" height="100%">
            <circle
                    cx="50%"
                    cy="50%"
                    r="45%"
                    fill-opacity="0"
                    :stroke-width="defaultLength"
                    stroke="#eee"
            />
            <circle
                    cx="50%"
                    cy="50%"
                    r="45%"
                    fill-opacity="0"
                    :stroke-width="defaultLength"
                    :stroke="defaultColor"
                    :stroke-dasharray="`${processLength} ${sumLength}`"
                    :stroke-linecap="bShowRadius ? 'round' : 'butt'"
                    style="transform: rotate(-90deg); transform-origin: 50% 50%;transition: all .6s;"
            />
        </svg>
    </div>
</template>

<script lang="ts" setup>
import {defineProps, computed, nextTick, onMounted, ref} from 'vue'

const props = defineProps<{
    color?: string, // 圆弧背景颜色
    value: number, // 数值，限制在 0 - 100
    bShowRadius?: boolean, // 是否显示圆角
    sTrokeWidth?: number, // 圆弧线宽
}>()

const bShowRadius = ref<boolean>( typeof props.bShowRadius === 'boolean' ? props.bShowRadius : true)
const defaultColor = ref<string>( props.color || '#409eff' )
const defaultLength = ref<number>( props.sTrokeWidth || 4)

// 动态id
let id = ref<string>( 'process-color' + Math.ceil(Math.random() * 1000) )

// 总长度
let sumLength = ref<number>(1000)

// 渲染圆弧长度
let processLength = computed(() => {
    if (sumLength.value === 1000) return 0
    return sumLength.value * (props.value / 100) || 0
})

onMounted(() => {
    sumLength.value = document.getElementById(id.value).offsetWidth * 0.45 * Math.PI * 2
})

</script>

<style scoped>
.process-wrap {
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1/1;
}
</style>