uni canvas百分比统计图

<template>
//我删除了部分代码只留了关键代码
<view class="list" v-for="(item,index) in list" :key="index">
				<canvas class="canvas" :canvas-id="item.canvas"></canvas>
			</view>
</template>

<script>
export default {
	data() {
		return {
			list:[
				{
					sum:100, //总数
					val:50, //实际值
					valArr:0, //固定0开始
					canvas:'myCanvas1' // canvasid
				},
				{
					sum:120,
					val:30,
					valArr:0,
					canvas:'myCanvas2',
				},
				{
					sum:100,
					val:50,
					valArr:0,
					canvas:'myCanvas3',
				}
			]
		};
	},
	mounted() {
		for(let i = 0;i<this.list.length;i++){
			this.Progressbar(this.list[i]);
		}
	},
	methods: {
		Progressbar(canvas) {
			//根据后台获取到的数据计算比例
			let sum = canvas.sum==0?1:canvas.sum; // 总计
			let newVal = parseFloat(((canvas.val / sum)*100).toFixed(1)) //展示概率
			let val = parseFloat(((canvas.valArr / sum) * 2).toFixed(1)); //实际
			const ctx = uni.createCanvasContext(canvas.canvas); //拿到canvas对象（自己的定义的canvas-id）
			// 开始绘制第一条路径 总数 红色
			ctx.beginPath(); // 开始绘制路径
			ctx.arc(50, 50, 45, 0, 3 * Math.PI); // arc画圆
			ctx.setStrokeStyle('#f2f2f2'); // 线条颜色
			ctx.setLineWidth(5); // 线条宽度
			ctx.stroke(); // 绘制成线条（fill()是填充为饼图）
			// 开始绘制第二条路径 成交 橘色
			ctx.beginPath();
			ctx.arc(50,50, 45, 0, val * Math.PI);
			ctx.setStrokeStyle('#00cc8b');
			ctx.setLineWidth(5);
			ctx.stroke();
			// 填充字体-367
			ctx.setFillStyle('#FF7400');
			ctx.setFontSize(25);
			ctx.setTextAlign('center');
			ctx.fillText(newVal, 50, 60);
			ctx.stroke();
			// 填充字体-累计推荐
			ctx.setFillStyle('#FF7400');
			ctx.setFontSize(13);
			ctx.fillText('%', 70, 60);
			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);
			}
		}
	}
};
</script>

<style lang="less">
//这里单位用的px因为canvas画的单位都是px，使用rpx则容易错位
.canvas {
	width: 100px;
	height: 100px;
}
</style>