圆环组件的实现

在项目中需要实现圆环组件的百分比展示效果

设计稿如图：

 

 

 需求：通过输入数字可以控制圆环进度条

 

通过看网上的一些资料，我有了三种方案实现思路

 

方案一：通过两个div拼接成一个圆环，通过border属性来模拟圆环。经过实践发现了它的缺点：显示不完整，放大之后两个盒子边界有缝隙。

方案二：通过模拟圆锥来实现这个圆环。经过实践感觉比方案一要好很多，毕竟它属于一个完整的盒子，不存在缝隙问题

　　　　实现方法可以看此链接：https://www.bilibili.com/video/BV1A44y1V7tM?spm_id_from=333.999.0.0

方案三：逛antv官网时，看到了圆环组件，因为项目中部分图表是使用antv实现的，立即决定使用该方案，链接：https://charts.ant.design/zh/examples/tiny/ring-progress#ring-progress