一、功能描述
主要用于展示数值,和根据百分比展示圆环
二、代码(圆环进度条组件)
<template>
<div class="progress" :style="{ width, height }">
<svg
viewBox="0 0 96 96"
class="svg-circle-progress"
style="width: 100%; height: 100%"
>
<circle
r="40"
cx="48"
cy="48"
fill="none"
stroke-miterlimit="20"
stroke-width="10"
class="svg-progress"
:style="`stroke-dasharray: 275, 279.602; stroke: ${bgCol}`"
></circle>
<circle
r="40"
cx="48"
cy="48"
fill="none"
stroke-miterlimit="20"
stroke-width="10"
class="svg-progress"
:style="`stroke-dasharray: ${progressValue}, 279.602;stroke:${color};`"
></circle>
</svg>
<div class="mask">
<!-- showProgress -->
<span class="bigData"> {{ showtext }} </span>
</div>
</div>
</template>
<script setup>
const props = defineProps({
// 百分比
targetValue: {
type: Number,
require: true,
default: -1,
},
// 默认轨道背景颜色
bgCol: {
type: String,
default: "#eee",
},
// 数值轨道颜色
color: {
type: String,
default: "#4c7cee",
},
// 展示数值
showtext: {
type: Number,
default: 0,
require: true,
},
// 宽度
width: {
type: String,
default: "210px",
},
// 高度
height: {
type: String,
default: "100px",
},
});
const { height, width, color, targetValue, bgCol, showtext } = toRefs(props);
const showProgress = ref(0);
const addData = () => {
if (targetValue.value === 0) return;
let timer = setInterval(() => {
if (targetValue.value === showProgress.value) {
clearInterval(timer), timer == null;
return;
}
++showProgress.value;
}, 15);
};
onMounted(() => {
addData();
});
const progressValue = ref((showProgress.value / 100) * 250);
watch(showProgress, (newValue) => {
progressValue.value = (newValue / 100) * 250;
});
</script>
<style scoped>
@font-face {
font-family: 'LCD';
src: url('/src/assets/static/font/LiquidCrystal-Normal.otf');
}
.progress {
display: inline-block;
position: relative;
height: 100px;
text-align: center;
}
.svg-circle-progress {
position: relative;
transform: rotate(-90deg);
}
.svg-progress {
stroke: #2196f3;
stroke-linecap: round;
transition: all 0.3s linear;
}
.mask {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bigData {
font-family: 'LCD';
text-align: center;
font-size: 12px;
font-weight: 500;
color: #fff;
}
</style>
三、使用
<Cirque
:target-value="item.progress"
:bgCol="item.bgCol"
:color="item.Col"
:showtext="item.value"
width="50px"
height="50px"
/>
四、本项目使用效果