圆弧进度条

已经很久没有写文章了，这次来说说环形进度条吧。

image

如上图所示，与设计稿还原度99%，本来想忽悠设计师用echars的环形图样式，无奈设计师说丑（好像没毛病），没办法只能手撸。

最开始想到的是canvas，然后就哼次哼次搞了起来，然后发现canvas有点问题，就是渲染出来很模糊，这个可以通过放大画布的尺寸来解决，但是呈现出来的效果还是会有点毛边。

所以，我又去看了svg相关的实现，当然也借鉴了网上的部分代码。

先说下好处吧。

1、svg可以在一个区域画一段弧线。

2、svg可以设置笔触弧度，也就是弧线的圆角。

3、svg是矢量图，不会出现模糊的问题。

上代码:

<template>
  <div class="chart-progress">
      <svg class="progress-svg" width="72" height="72">
        <path class="progress-path" fill="none" :d="path" stroke-linecap="round" stroke-width="8" stroke="#31ACFF"></path>
    </svg>
    <p class="progress-text">{{progressText}}%</p>
  </div>
</template>
<script>
export default {
   props:{
       progress:{
           type:Number,
           default:0
       }
   },
   computed:{
       path(){
        let progress = isNaN(this.progress)?0:this.progress;
        //如果progress == 100 ,圆弧弧度就是360度，此时，起始点就重合了，svg无法显示成360度圆弧。
        if(this.progress == 100){
            progress = 99.99
        }
        var r = 32;
        var degrees = 3.6 * progress;
        var rad = degrees* (Math.PI / 180);
        var lenghty = this.progress>50?1:0;  //大于180% 参数是1
        var x = (Math.sin(rad) * r).toFixed(2);
        var y = -(Math.cos(rad) * r).toFixed(2);
        var descriptions = ['M', 0, -r, 'A', r, r, 0, lenghty, 1, x, y];
        return descriptions.join(' ');
       },
       progressText(){
          return isNaN(this.progress)?0:this.progress;
       }
   }
}
</script>

<style lang="less" scoped>
.chart-progress{
    position: relative;
    width: 72px;
    height: 72px;
    background: #E2E5ED;
    border-radius:50%;
    .progress-svg{
        transform:rotate(200deg);
        .progress-path{
            transform: translate(36px,36px);
        }
    }
    .progress-text{
        padding: 0;
        margin: 0;
        width: 56px;
        height: 56px;
        text-align: center;
        line-height: 60px;
        position: absolute;
        left: 8px;
        top: 8px;
        border-radius:100%; 
        background: #FFF;
        font-size: 18px;
        font-family: "DIN-Condensed-Bold";
    }
}
</style>

其中，descriptions = ['M', 0, -r, 'A', r, r, 0, lenghty, 1, x, y];
这段参数可以参考svg画圆弧的参数示例。

https://segmentfault.com/a/1190000004393817

默认svg圆弧的开始位置不是设计稿的位置，所以整体用css3旋转200度就ok了。