实现自定义样式进度圆环

开发过程

产品需求

根据接口返回的数据来实现一个自定义样式的百分比圆环组件。

因为圆环有复杂的节点样式，市面上已有组件样式比较单一，且只能配置基础的颜色等，所以综上，结论是需要自己实现 😎

设计思路

每个节点的样式是一致的，所以绘制多个节点元素通过旋转就可以得到一个圆环。然后控制节点的展示样式就可以来展示百分比数据。

开发过程

绘制节点，并依次旋转

<div class="progress_circle_content">
  <div v-for="(item, index) in 18" :key="item">
    <div
      class="item"
      :style="{
        transform: `rotate(${index * 20}deg)`
      }"
    />
  </div>
</div>

设置节点的定位位置和旋转中心

.item {
  position: absolute;
  top: 0;
  width: 18px;
  height: 28px;
  right: calc(50% - 9px);
  background-color: rgba(100, 100, 100, 0.3);
  border-radius: 5px;
  transform-origin: 9px 100px;
}

当节点是在进度内的，则亮起该节点

这块简单处理，只修改节点的背景颜色，所以修改节点的行内样式即可

<div
  class="item"
  :style="{
    transform: `rotate(${index * 20}deg)`,
+   'background-color': index <= 12 ? '#8ebeff' : '#ffffff4d'
  }"
/>

完善代码增加一些配置信息

例如：百分比数值、节点个数、进度展示等……

完整代码

存在问题

这种方式也存在一定的问题，就是只能对整个节点进行样式控制，例如进度99%，所有的节点都亮起。后期可以优化升级

整点花环