废话少说，先上传效果图，符合要求再往下看：这是参考有赞商城做的一个小功能。直接贴方法，到时候调用方法直接传值即可。html:script:mounted(){this.toCanvas("circle",70);//第一个是id，第二个是百分比（arcreachposition）},toCanvas(id,progress){//画布进度条varcanvas=document.getElementById(id);varctx=canvas.getContext("2d");var百分比=进度；//最终百分比varcircleX=canvas.width/2;//中心x坐标varcircleY=canvas.height/2;//中心y坐标varradius=90;//圆半径varlineWidth=14;//圆线的宽度//中间字varfontSize=25;ctx.font=fontSize+"px四月";ctx.textAlign="居中";ctx.fillStyle="#000";ctx.fillText(parseFloat(percent).toFixed(0),circleX,circleY);字体大小=12；ctx.font=fontSize+"px四月";ctx.fillStyle="#999";ctx.fillText("我的成长值",circleX,circleY-40);ctx.fillStyle="#999";ctx.fillText("20积分升级会员",circleX,circleY+40);//画圆函数circle(cx,cy,r){ctx.beginPath();//ctx.moveTo(cx+r,cy);ctx.lineWidth=线宽；ctx.strokeStyle="#fff";ctx.arc(cx,cy,r,(Math.PI*2)/3,(Math.PI*1)/3);ctx.stroke();}//绘制圆弧函数sector(cx,cy,r,startAngle,endAngle){ctx.beginPath();//ctx.moveTo(cx,cy+r);//从圆的底部绘制ctx.lineWidth=lineWidth;////渐变颜色-可自定义//varlinGrad=ctx.createLinearGradient(//circleX-radius-lineWidth,//circleY,//circleX+radius+lineWidth,//circleY//);//linGrad.addColorStop(0.0,"#06a8f3");////linGrad.addColorStop(0.5,'#9bc4eb');//linGrad.addColorStop(1.0,"#00f8bb");ctx.strokeStyle="红色";//圆弧两端的样式ctx.lineCap="round";//圆弧ctx.arc(cx,cy,r,(Math.PI*2)/3,(Math.PI*2)/3+(endAngle/100)*((Math.PI*5)/3),false);ctx.stroke();}//圆circle(circleX,circleY,radius);//圆弧扇区(circleX,circleY,radius,(Math.PI*2)/3,percent);}，希望能帮到你，继续努力！！
