先看效果图，其实很简单，实现圆环的方式有多种，

1，svg实现，

2，css3.0实现，

3，canvas实现，

 

1，svg实现进度条：效果如下：

代码：SvgProgress.vue

父组件引用：

<svgProgress

:pvalue="value6"

:psymbol="'天'"

:progress='progress6'

:color="'#FFAFAF'"

:width="'210px'"

:height="'100px'"

:title="'本期剩余天数'"

:colorkey="6"

v-if="showP6"

></svgProgress>

 

2.css3.0实现代码

CssProgress.vue

父组件引用：

<dateTools

:dateToolsKey="1"

:trainDateList="trainDateList"

ref="topDateTools1"

@topDateEvent1="topDateFun1"

></dateTools>

<dateTools

:dateToolsKey="2"

:trainDateList="trainDateList2"

ref="topDateTools2"

@topDateEvent2="topDateFun2"

></dateTools>