css实现圆环展示百分比,根据值动态展示所占比例

代码如下

javascript 复制代码
<view class="">
	<view class="circle-chart">
		<view v-if="!!num" class="pie-item" :style="{
				  background: `conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%)`,
				}"></view>
		<view v-else class="pie-item-copy" :style="{
				  background:'#E9E6F1',
				}"></view>
		<view v-if="!!degNum" class="pie-item" :style="{
				        background: `conic-gradient(var(--two-color) 0%,transparent ${20}%)`,
				        transform: `scaleX(-1) rotate(${degNum}deg)`,
				      }"></view>
		<view class="biaopan">
			<view class="biaopanCot">
				<view class="">
					93
				</view>
				<view class="">
					6小时42分钟
				</view>
			</view>
		</view>
	</view>
</view>
<script>
	export default {
		data() {
			return {
				num: 85, //圆环数值百分比
				degNum: '', //旋转的角度
			}
		},
		watch: {
			num: {
				handler(newValue) {
					if (!!this.num) {
						this.degNum = 360 * (100 - newValue) / 100
					} else {
						this.degNum = ''
					}
				},
				deep: true,
				immediate: true,
			},
		},
	}
</script>
<style scoped lang="scss">
	.circle-chart {
		position: relative;
		--one-color: #11D64C;
		--two-color: #c5ffd7a1;
		width: 460rpx;
		height: 460rpx;
		margin: 0 auto;

		
	}
	.circle-chart .pie-item-copy {
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		mask: radial-gradient(transparent,
				transparent 174rpx,
				#000 176rpx,
				#000 176rpx,
				#000 100%);
	}
	
	.circle-chart .pie-item {
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		mask: radial-gradient(transparent,
				transparent 174rpx,
				#000 176rpx,
				#000 176rpx,
				#000 100%);
	
		
	}
	.pie-item:nth-child(1)::before {
		background: linear-gradient(90deg,
				var(--one-color) 50%,
				transparent 51%,
				transparent 100%);
	}
		
	.pie-item:nth-child(2)::before {
		background: linear-gradient(90deg,
				var(--two-color) 50%,
				transparent 51%,
				transparent 100%);
	}
		
	.pie-item::before {
		content: '';
		position: absolute;
		inset: 0;
		width: 56rpx;
		height: 56rpx;
		top: 0;
		left: 202rpx;
		border-radius: 50%;
	}

	.biaopan {
		position: absolute;
		left: 68rpx;
		right: 68rpx;
		top: 68rpx;
		bottom: 68rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.biaopanCot{
		text-align: center;
	}

	< /style>
相关推荐
paopaokaka_luck43 分钟前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9491 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_1 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路4 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔4 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang4 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔4 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任5 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴5 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔5 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js