vue-gradient-progress --------渐变色圆环进度条

在实际开发中可能会遇到这样的 UI 效果图：

带动画效果的渐变色圆环进度条，可以使用vue-gradient-progress插件来实现

安装依赖

1. npm install vue-gradient-progress -S
   也可以使用 cnpm yarn 等
2. main.js 引入：

	import GradientProgress from 'vue-gradient-progress'
	import "vue-gradient-progress/lib/gradient-progress.css"
	Vue.use(GradientProgress)

使用示例

<gradient-progress id="pId" :rate="80" />
或
<gradient-progress id="pId" :rate="80">
...自定义内容
</gradient-progress>

参数

属性	描述	类型	默认值
id	id,同一组件内多次使用，id要不同	String	canvasId
showRate	是否显示rate值	Boolean	true
rate	rate	Number	0
lineWidth	圆环边框宽度	Number	6
canvasWidth	canvas宽度	Number	300
canvasHeight	canvas高度	Number	150
ballR	小球半径	Number	2.5
cirR	圆环半径	Number	45
startColor	渐变色开始颜色(rgb)	Array	[143, 211, 235]
endColor	渐变色结束颜色(rgb)	Array	[88, 176, 168]