
进度条组件，支持Line、Circle、SemiCircle、Customize四种类型的进度条

### 引入

```javascript
import { DoProgressBar } from '@alex_doone/doone-ui'

Vue.use(DoProgressBar)
```

### 代码演示

```vue
<DoProgressBar />
```

### 效果
<img src="http://m.qpic.cn/psb?/V10unsPD0QOZQy/t0*GePHEWXWriGH6yH.Fx*ha807pZvEGEvXI3XO630Q!/b/dMMAAAAAAAAA&bo=hgjCAgAAAAADB2w!&rf=viewer_4" width="500">
<img src="http://m.qpic.cn/psb?/V10unsPD0QOZQy/REDGiG9LMs5uc49GNmOwRZdO*ge5MPe6zBeYmM4bmeY!/b/dL4AAAAAAAAA&bo=Vgi4AgAAAAADF9Y!&rf=viewer_4" width="500">
<img src="http://m.qpic.cn/psb?/V10unsPD0QOZQy/FheVHuKV8RJksluRVrQblI3a9rv4eCCwXA6Czr16nIo!/b/dE8BAAAAAAAA&bo=GAbcAgAAAAADF*I!&rf=viewer_4" width="500">
<img src="http://m.qpic.cn/psb?/V10unsPD0QOZQy/Wm1r1iWT6yk9xED8CZChvm4Rv3Rd.GeI*HGoTgQeuyE!/b/dL8AAAAAAAAA&bo=agPgAgAAAAADF7k!&rf=viewer_4" width="500">

### API

#### Amount Props
|属性 | 说明 | 类型 | 默认值 | 备注 |
|----|-----|------|------|------|
|type|进度条类型(线性，圆环型，半圆形，自定义)|Enum|`["Line", "Circle", "SemiCircle", "Customize"]"`|-|
|width|宽度|String|`"200px"`|-|
|height|高度|String|`"8px"`|-|
|isPercent|是否显示进度文字|Boolean|`true`|-|
|rate|设置进度条进度|Number|`1`|-|
|afterAnimate|动画执行完毕之后执行方法|Function|-|-|
|strokeWidth|线条宽度|Number|`4`|-|
|easing|动画类型|String|`easeInOut`|-|
|duration|动画持续时间（毫秒）|Number|`1400`|-|
|color|进度条颜色|String|`#ED6A5A`|-|
|trailColor|中间线条颜色|String|`#eee`|-|
|trailWidth|中间线条宽度|Number|`1`|-|
|svgStyle|svg的内联样式|Object|`{width: "100%",height: "100%"}`|-|
|textClassName|文本元素的类名|String|`ProgressBar_text`|-|
|textStyle|文本元素样式|Object|`{}`|-|
|autoStyleContainer|仅当text.style不为空时有效|Boolean|`false`|-|
|alignToBottom|仅当形状为半圆时有效,如果为true，则文本的基线与底部对齐;SVG画布。如果为false，SVG画布的底线,位于文本中心。|Boolean|`false`|-|
|fill|填充形状的颜色。如果为空，则不填充。默认值：空|String|`""`|-|
|from|起始|Object|`{}`|-|
|to|终止|Object|`{}`|-|
|step|运行时的执行函数|Function|`{}`|-|
|warnings|错误报告|Boolean|`false`|-|
