vue3圆环进度条组件

一、功能描述

主要用于展示数值，和根据百分比展示圆环

二、代码（圆环进度条组件）

html 复制代码

<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>

三、使用

html 复制代码

<Cirque
  :target-value="item.progress"
  :bgCol="item.bgCol"
  :color="item.Col"
  :showtext="item.value"
  width="50px"
  height="50px"
  />

四、本项目使用效果