话不多说先上效果图，合乎需要再往下看：
这是参考有赞商城做的一个小性能。
间接贴办法，到时候间接调用办法传值就好。
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);
},心愿能帮忙你，持续致力加油鸭！！