不引入第三方库，绘制圆环

在前端项目中，选择使用 第三方库 还是 简单的 CSS/JS 来实现圆环，取决于项目的需求、复杂度、开发效率以及性能要求。

适合使用第三方库的情况

复杂的数据可视化需求：需要展示多组数据、动态更新数据或交互复杂的圆环图。
需要丰富的图表功能：需要支持图例、工具提示、动画效果等功能。
开发时间有限：项目时间紧张，需要快速实现功能。
跨浏览器兼容性要求高：需要兼容多种浏览器。
团队技术栈统一：团队已经熟悉某个第三方库，且项目中已经使用了该库。

适合使用简单的 CSS/JS 的情况

简单的静态圆环
性能要求高
项目规模小
自定义需求强

实现方式

方法 1：使用纯 CSS 实现圆环图

html 复制代码

<div class="ring">
  <div class="ring-inner"></div>
</div>

css 复制代码

.ring {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(#4caf50 75%, #e0e0e0 0);
  position: relative;
}

.ring-inner {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使用 conic-gradient 实现环形颜色填充，conic-gradient锥形渐变。
通过内部的白色圆形遮罩实现圆环效果。

方法 2：使用 SVG 实现圆环图

arduino 复制代码

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="#e0e0e0" stroke-width="10" fill="none" />
  <circle cx="50" cy="50" r="40" stroke="#4caf50" stroke-width="10" fill="none"
          stroke-dasharray="251.2" stroke-dashoffset="62.8" />
</svg>

第一个 <circle> 绘制背景圆环。
第二个 <circle> 绘制前景圆环，通过 stroke-dasharray 和 stroke-dashoffset 控制圆环的进度。
stroke-dasharray 是圆环的周长（2 * π * r），stroke-dashoffset 是圆环的空白部分。

方法 3：使用 Canvas 实现圆环图

arduino 复制代码

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

ini 复制代码

const canvas = document.getElementById('ringCanvas');
const ctx = canvas.getContext('2d');

function drawRing(progress) {
  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;
  const radius = 40;
  const lineWidth = 10;

  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制背景圆环
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
  ctx.strokeStyle = '#e0e0e0';
  ctx.lineWidth = lineWidth;
  ctx.stroke();

  // 绘制前景圆环
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius, -Math.PI / 2, (Math.PI * 2 * progress) - Math.PI / 2);
  ctx.strokeStyle = '#4caf50';
  ctx.lineWidth = lineWidth;
  ctx.stroke();
}

// 绘制一个 75% 的圆环
drawRing(0.75);

使用 ctx.arc 绘制圆环。
通过 progress 参数控制圆环的进度。

ps: 如果需要实现带弧度的圆环尖端，可以使用SVG, Canvas 或者Css 和 SVG相结合。

不引入第三方库，绘制圆环

适合使用第三方库的情况

推荐的第三方库：

适合使用简单的 CSS/JS 的情况

实现方式

方法 1：使用纯 CSS 实现圆环图

方法 2：使用 SVG 实现圆环图

方法 3：使用 Canvas 实现圆环图