realty/virgo.wzfrontend/console/src/components/show/progressBar.vue

<template>
	<div class="progress-bar color-font" :style="'--percent:'+percent+';'">
		<svg class="progress-circle">
			<circle stroke="var(--inactive-color)"
				style="stroke-dasharray: calc(3.1415 * var(--r) * (360 - 120) / 180),calc(3.1415 * var(--r) * 120 / 180)" />
			<circle stroke="var(--color)"
				style="stroke-dasharray: calc(3.1415 * var(--r) * var(--percent) * var(--active-degree) / 180 / 100), 1000" />
		</svg>
		<div class="progress-label">
			<span class="alibaba number">{{percent}}</span><span class="unit">%</span>
		</div>
	</div>
</template>
<script>
	export default {
		props: ['percent', 'title'],
		data() {
			return {};
		},
		created() {},
		methods: {}
	};
</script>

<style lang="scss">
	.progress-bar {
		width: 70px;
		position: relative;

		.progress-label {
			display: flex;
			align-items: center;
			position: absolute;
			left: 0;
			width: 100%;
			bottom: 30px;
			justify-content: center;

			.number {
				font-size: 14px;
			}

			.unit {
				opacity: 0.6;
				font-size: 7px;
				font-weight: 500;
				line-height: 10px;
			}
		}

		/* 百分数 */
		--percent: 100;
		/* 尺寸大小 */
		--size: 70px;
		/* 环形宽度（粗细） */
		--border-width: 6px;
		/* 主色 */
		--color: #6FF2F0;
		/* 辅助色 */
		--inactive-color: #283040;
		--r: calc((var(--size) - var(--border-width)) / 2);
		--gap-degree: 120;
		--active-degree: calc(360 - var(--gap-degree));

		.progress-circle {
			width: var(--size);
			height: var(--size);
			transform: rotate(-90deg);
			border-radius: 50%;

		}

		circle {
			cx: calc(var(--size) / 2);
			cy: calc(var(--size) / 2);
			r: calc((var(--size) - var(--border-width)) / 2);
			fill: none;
			stroke-width: var(--border-width);
			stroke-linecap: round;
			transition: stroke-dasharray 0.4s linear, stroke .3s;
			transform: rotate(calc((var(--gap-degree) + (360 - var(--gap-degree)) / 2) * 1deg));
			transform-origin: center;
		}
	}
</style>