话不多说先上效果图，合乎需要再往下看：
这是参考有赞商城做的一个小性能。
间接贴办法，到时候间接调用办法传值就好。
html:
<canvas id="circle" class="circle-item" width="240px" height="240px"></canvas>script:
mounted() { this.toCanvas("circle", 70); //第一个是id，第二个百分比（圆弧达到地位）}, toCanvas(id, progress) { //canvas进度条 var canvas = document.getElementById(id); var ctx = canvas.getContext("2d"); var percent = progress; //最终百分比 var circleX = canvas.width / 2; //核心x坐标 var circleY = canvas.height / 2; //核心y坐标 var radius = 90; //圆环半径 var lineWidth = 14; //圆形线条的宽度 //两头的字 var fontSize = 25; ctx.font = fontSize + "px April"; ctx.textAlign = "center"; ctx.fillStyle = "#000"; ctx.fillText(parseFloat(percent).toFixed(0), circleX, circleY); fontSize = 12; ctx.font = fontSize + "px April"; ctx.fillStyle = "#999"; ctx.fillText("我的成长值", circleX, circleY - 40); ctx.fillStyle = "#999"; ctx.fillText("还差20积分降级会员", circleX, circleY + 40); //画圆 function circle(cx, cy, r) { ctx.beginPath(); //ctx.moveTo(cx + r, cy); ctx.lineWidth = lineWidth; ctx.strokeStyle = "#fff"; ctx.arc(cx, cy, r, (Math.PI * 2) / 3, (Math.PI * 1) / 3); ctx.stroke(); } // 画弧线 function sector(cx, cy, r, startAngle, endAngle) { ctx.beginPath(); //ctx.moveTo(cx, cy + r); // 从圆形底部开始画 ctx.lineWidth = lineWidth; // // 渐变色 - 可自定义 // var linGrad = 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 = "red"; //圆弧两端的款式 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); //圆弧 sector(circleX, circleY, radius, (Math.PI * 2) / 3, percent); },心愿能帮忙你，持续致力加油鸭！！