smartSchoolClockApp/pages/components/chocolate-progress-bar/chocolate-progress-bar.vue

<template>
	<view class="progress_box">
		<canvas class="progress_bg" canvas-id="cpbg"></canvas>
		<canvas class="progress_bar" canvas-id="cpbar"></canvas>
		<view class="progress_txt">
			<!-- <view class="progress_info">{{ progress_txt }}%</view> -->
			<view class="progress_info">{{progress_txt}}/{{progress_total}}</view>
			<text>每日完成占比</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			progress_txt: {
				type: Number,
				default: 0
			},
			progress_total: {
				type: Number,
				default: 0
			}
		},
		onReady() {
			this.drawProgressbg();
			this.drawCircle(this.progress_txt / this.progress_total * 100); //参数为1-100
		},
		methods: {
			drawProgressbg() {
				// 自定义组件实例 this ，表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/>
				var ctx = uni.createCanvasContext('cpbg', this);
				ctx.setLineWidth(8); // 设置圆环的宽度
				ctx.setStrokeStyle('#CCCCCC'); // 设置圆环的颜色
				ctx.setLineCap('round'); // 设置圆环端点的形状
				ctx.beginPath(); //开始一个新的路径
				ctx.arc(80, 60, 55, 0.85 * Math.PI, 0.15 * Math.PI, false);
				//设置一个原点(110,110)，半径为100的圆的路径到当前路径
				ctx.stroke(); //对当前路径进行描边
				ctx.draw();
			},
			drawCircle(step) {
				if (step == 0 || Object.is(step, NaN)) {
					return
				} else {
					var ctx = uni.createCanvasContext('cpbar', this);
					// 进度条的渐变(中心x坐标-半径-边宽，中心Y坐标，中心x坐标+半径+边宽，中心Y坐标)
					var gradient = ctx.createLinearGradient(28, 55, 192, 55);
					gradient.addColorStop('0', '#2A82E4');
					gradient.addColorStop('1.0', '#2A82E4');
					ctx.setLineWidth(8);
					ctx.setStrokeStyle(gradient);
					ctx.setLineCap('round');
					ctx.beginPath();
					// 参数step 为绘制的百分比
					step = 0.015 * step + 0.75;
					if (step >= 2.25) {
						step = 0.15
					}
					ctx.arc(80, 60, 55, 0.85 * Math.PI, step * Math.PI, false);
					ctx.stroke();
					ctx.draw();
				}

			}
		}
	};
</script>

<style lang="scss" scoped>
	.progress_box {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;

		.progress_bg {
			z-index: 1;
			position: absolute;
			width: 100%;
			height: 100%;
		}

		.progress_bar {
			z-index: 1;
			position: absolute;
			width: 100%;
			height: 100%;
		}

		.progress_txt {
			position: absolute;
			padding-right: 20rpx;

			.progress_info {
				letter-spacing: 2rpx;
				font-size: 36rpx;
			}

			text {
				font-size: 22rpx;
				color: #A6A6A6;
			}
		}
	}

	/* .progress_dot {
		width: 16upx;
		height: 16upx;
		border-radius: 50%;
		background-color: #fb9126;
	} */
</style>