vue圆环进度条_Vue/React圆环进度条

数据展示，一直是各行各业乐此不疲的需求，具体到前端开发行业，则是各种各种图表数据展示，各种表格数据展示，烦不胜烦(繁不胜繁)！

前几天刚做了折线图、柱状图、饼状图之类的图表数据展示效果，今天又碰到了类似圆环进度条的展示效果。天天跟数据打交道，天天跟接口打交道，项目做了不少，菜逼还是菜逼，都是泪啊！

其实说白了，是自己对canvas不熟，对CSS3不熟，所以就找了一个现成的轮子：

:cy="width/2"

:cx="width/2"

:stroke-width="radius"

:stroke="backgroundColor"

fill="none"

/>

:r="(width-radius)/2"

:cy="width/2"

:cx="width/2"

:stroke="barColor"

:stroke-width="radius"

:stroke-linecap="isRound ? 'round' : 'square'"

:stroke-dasharray="(width-radius)*3.14"

:stroke-dashoffset="isAnimation ? (width-radius) * 3.14 : (width - radius) * 3.14 * (100 - progress) / 100"

fill="none"

/>

{ {progress}}%

export default {

props: {