![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d5ff571866602bf8e061bbc8c65d1c25.png)
<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,
canvas:'myCanvas1'
},
{
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);
ctx.beginPath();
ctx.arc(50, 50, 45, 0, 3 * Math.PI);
ctx.setStrokeStyle('#f2f2f2');
ctx.setLineWidth(5);
ctx.stroke();
ctx.beginPath();
ctx.arc(50,50, 45, 0, val * Math.PI);
ctx.setStrokeStyle('#00cc8b');
ctx.setLineWidth(5);
ctx.stroke();
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">
.canvas {
width: 100px;
height: 100px;
}
</style>