跟进完成度环

要解决的问题

跟进类场景——今日任务完成度、客户清单推进状态、Demo KPI 展示——往往需要「一眼看到完成了多少」的视觉反馈。纯数字文本不够直观，而完整的图表平台（如 ECharts）对这类轻量场景又过重。自行实现环形进度时，开发者常会遇到进度值越界、容器尺寸缺失导致环不可见、组件卸载后残留 SVG 节点等问题。

技能如何工作

核心思路是用 progressbar.js 渲染 0～1 区间的完成度圆环，通过 Circle.animate 驱动动画。关键步骤如下：

• 固定容器：进度卡片必须设置明确的宽高，否则圆环无法正常绘制。
• 进度钳制：传入值需限制在 [0, 1]，超过 1 的百分比必须先换算。
• 动态更新：数据变化时调用 set 方法刷新环的比例，无需重建实例。
• 彻底销毁：组件卸载（如 onBeforeUnmount）时必须调用 destroy()，避免残留 SVG。
• 自测要点：验证 0.75 显示约 75%，且卸载后页面无遗留节点。

实现中标注 小四原创 的核心逻辑，保证代码可追溯。

适用边界

本技能定位为轻量进度可视化，不构建完整的 ECharts 级图表平台。仅适合单一圆环的完成度展示；若需要多图表联动、复杂交互或数据钻取，应改用专业可视化方案。使用时务必避免容器无尺寸、传入未换算百分比两类常见错误。