UNIAPP 圆形进度条

 

 

rate: {
	sum: 100, // 总计
	val: 80, //实际值
	pre: 15,
	valArr: 0,
	canvas: "xxxxx",
	}

Progressbar(rate) {
	//根据后台获取到的数据计算比例
	let sum = canvas.sum == 0 ? 1 : canvas.sum; // 总计
	let newVal = parseFloat(((canvas.val / sum) * 100).toFixed(0)); //展示概率
	let val = parseFloat(((canvas.valArr / sum) * 2).toFixed(1)); //实际
	const ctx = uni.createCanvasContext(canvas.canvas); //拿到canvas对象（自己的定义的canvas-id）
	// 开始绘制第一条路径 总数 红色
	ctx.beginPath(); // 开始绘制路径
	ctx.arc(25, 25, 22, 0, 3 * Math.PI); // arc画圆
	ctx.setStrokeStyle("#f2f2f2"); // 线条颜色
	ctx.setLineWidth(5); // 线条宽度
	ctx.stroke(); // 绘制成线条（fill()是填充为饼图）
	// 开始绘制第二条路径 成交 橘色
	ctx.beginPath();
	ctx.arc(25, 25, 22, 0, val * Math.PI);
	ctx.setStrokeStyle("#ff7400");
	ctx.setLineWidth(5);
	ctx.stroke();
	// 填充字体-367
	ctx.setFillStyle("#FF7400");
	ctx.setFontSize(14);
	ctx.setTextAlign("center");
	ctx.fillText(newVal, 20, 25);
	ctx.stroke();
	// 填充字体-累计推荐
	ctx.setFillStyle("#FF7400");
	ctx.setFontSize(12);
	ctx.fillText("%", 35, 25);
	ctx.stroke();
	// 填充字体
	ctx.setFillStyle("#FF7400");
	ctx.setFontSize(10);
	ctx.fillText("完成率", 25, 35);
	ctx.stroke();
	// 渲染
	ctx.draw();
	//绘制动画效果
	if (canvas.valArr < canvas.val) {
	　　canvas.valArr = canvas.valArr + 5;
	　　if (canvas.valArr > canvas.val) {
	　　　　canvas.valArr = canvas.val;
	　　　　return;
	　　}
	}
	if (canvas.valArr <= canvas.val) {
	　　setTimeout(() => {
		this.Progressbar(canvas);
		}, 20);
	}
}