使用css制作一个环形进度展示圈

想要制作一个上面的效果的比例展示，但又划不着使用echarts等；故而使用css进行实现

主要是使用到conic-gradient来进行控制，直接上代码吧

<div class="circle-chart-box">
	<div class="circle-chart"></div>
	<div class="circle-chart__value">25780</div>
	<div class="circle-chart__unit">（总收益）</div>
</div>

.circle-chart-box {
	width: 120px;
	height: 120px;
	position: relative;
}

.circle-chart {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	/* 核心：锥形渐变实现分段（比例可自定义，这里假设三段比例为70%、15%、15%） */
	background: conic-gradient(#1890ff 0% 70%,
			/* 第一段：蓝色，占70% */
			#ff4d4f 70% 85%,
			/* 第二段：红色，占15% */
			#faad14 85% 100%
			/* 第三段：黄色，占15% */
		);
	/* 裁剪出圆环（中间镂空） */
	-webkit-mask: radial-gradient(transparent 60%, #000 60%);
	mask: radial-gradient(transparent 60%, #000 60%);
}

/* 数字和单位的居中样式 */
.circle-chart__value {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -55%);
	font-size: 24px;
	font-weight: bold;
	color: #333;
}

.circle-chart__unit {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, 60%);
	font-size: 12px;
	color: #666;
}