HTML部分:

 <canvas id="mycanvas" width="100" height="100"></canvas>

JS部分：

const option = {element: "mycanvas", // 元素count: 26, // 高亮数据totalCount: 129, // 总数据progressColor: '#3266FB',  // 进度条颜色bgColor: '#3266FB29',   // 背景颜色
};
// 绘制环形图
drawCircle (option) {let mycanvas = document.getElementById(option.element);let ctx = mycanvas.getContext('2d');// 找到画布的中心点let canvasX = mycanvas.width / 2;let canvasY = mycanvas.height / 2;let progress = (Math.PI * 2 * option.count) / option.totalCount;// 绘制环形底层ctx.strokeStyle = option.bgColor;ctx.lineWidth = 20;ctx.save();ctx.beginPath();ctx.arc(canvasX, canvasY, 28, 0, Math.PI * 2, false);ctx.stroke();ctx.closePath();ctx.restore();// 绘制进度层ctx.strokeStyle = option.progressColor;ctx.lineWidth = 25;ctx.save();ctx.beginPath();ctx.arc(canvasX, canvasY, 32, (-Math.PI / 3) * 2, ((-Math.PI / 3) * 2) + progress, false);ctx.stroke();ctx.closePath();ctx.restore();
},

效果如下图：