文档
安装
通过 npm
npm install hemy-progress
基本使用
<div id="progress"></div>
import hemyProgress from 'hemy-pregress';
type:String 和 percentage:Number 必填 type 支持以下值
- line 线条
- circle 环形
- rect 矩形
- ellipse 椭圆
- path 自定义图形,d 值必填
new hemyProgress('#progress', {
type: 'circle',
percentage: 60,
});
自定义图形大小颜色配置
- strokeWidth,backStrokewidth 进度条和背景的宽度
- strokeColor,backStrokeColor 进度条和背景的颜色
- fillColor: 填充颜色
- textStyle: 显示文字的样式
- lineHeight: type=line 时,进度条高度
- radius: type=circle 时,circle 的半径大小
- borderRadius: type=line,rect 时的圆角大小
- 更多请查看API 使用介绍
new hemyProgress('#progress', {
type: 'circle',
percentage: 50,
strokeColor: 'red',
fillColor: '#D7BDE2',
backStrokeColor: '#F5EEF8 ',
radius: 80,
strokeWidth: 20,
backStrokeWidth: 20,
strokeLinecap: 'round',
textStyle: { fontSize: '20px', color: 'green' },
});
进度条颜色可传入一个颜色数组 如 strokeColor=['green','blue','yellow','orange','red'],在进度 0-20,20-40,40-60,60-80,80-100 时分别显示'green','blue','yellow','orange','red'
- 调用实例的setProgress方法,参数为一个 object,重新设置当前进度条样式
const progress = new hemyProgress('#progress', {
type: 'line',
percentage: 20,
strokeColor: ['green', 'blue', 'yellow', 'orange', 'red'],
borderRadius: 20,
});
progress.setProgress({ percentage: 80 });
虚线样式
- isDashed:Boolean 开启虚线
- dashedLength:Number 虚线长度
- dashedDistance:Number 虚线间隔
当 type 为 line 时,虚线需要设置合适虚线长度和虚线间隔,以便最后一个虚线刚好落在容器的最后面,例:虚线宽度和间隔都为 5px,则进度条(容器)总宽度可以设为 105px 115px 125px...
new hemyProgress('#progress', {
type: 'circle',
percentage: 50,
strokeWidth: 20,
backStrokeWidth: 20,
isDashed: true,
});
自定义图形
- type=path
- d 值必填
- pathLength 自定义图形路径的总长度,如果存在,路径将进行缩放,以便计算各点相当于此值的路径长度
new hemyProgress('#progress', {
type: 'path',
percentage: 50,
showText: false,
strokeWidth: 20,
backStrokeWidth: 20,
strokeLinecap: 'round',
strokeLinejoin: 'round',
strokeColor: 'blue',
pathLength: 800,
d: 'm20.74,153.83019l75.9583,-69.50019l0,34.75l110.08345,0l0,-34.75l75.95827,69.50019l-75.95827,69.49982l0,-34.74991l-110.08345,0l0,34.74991l-75.9583,-69.49982z',
});
自定义显示内容(插槽)
- 以属性 slot 值方式传入
new hemyProgress('#progress', {
type: 'circle',
percentage: 50,
strokeWidth: 20,
backStrokeWidth: 20,
radius: 60,
strokeColor: '#641E16',
strokeLinecap: 'round',
slot: `
<div style="text-align:center">
<img src='lufei.png' style="width:100%;height:100%;border-radius:100%"></img>
</div>
`,
});
API 使用介绍
表格 | 值类型 | 是否必填 | 描述 | 默认值 |
---|---|---|---|---|
type | String | 否 | 进度条类型,line=线条,circle=环形,ellipse=椭圆,rect=矩形,path=自定义图形 | line |
percentage | Number | 是 | 进度条百分比 | 100 |
fillColor | String | 否 | 闭合图形填充颜色,type!==line生效 | none |
strokeWidth | Number | 否 | 进度条宽度 | 10 |
strokeColor | String,Function,Array | 否 | 进度条颜色,可接受字符串,参数为percentage的函数,数组, ['#f56c6c','#e6a23c','#5cb87a','#1989fa','#6f7ad3'] 或者 [ {color: '#f56c6c', percentage: 20}, {color: '#e6a23c', percentage: 40}, {color: '#5cb87a', percentage: 60}, {color: '#1989fa', percentage: 80}, {color: '#6f7ad3', percentage: 100} ] | #409eff |
backStrokeColor | String | 否 | 背景进度条颜色 | #eee |
backStrokewidth | Number | 否 | 背景进度条宽度 | 5 |
textStyle | Object | 否 | 文字样式,例:{color:'red',fontSize:'25px'} | {} |
showText | Boolean | 否 | 是否显示文字 | true |
format | function(percentage) | 否 | 自定义进度条文字内容 | |
width | Number | 否 | 画布宽,type=path时,会自动计算画布宽高 | 200 |
height | Number | 否 | 画布高,type=circle时,height=width | 200 |
strokeLinecap | String | 否 | 环形条线帽,butt:正常结尾,round:圆润,square:两端为方形 | round |
strokeLinejoin | String | 否 | 线段连接处的样式,miter:正常连接,round:圆润,bevel:切除连接处的尖尖部分 | miter |
strokeMiterlimit | Number | 否 | 连接处宽度和线条宽度的比 | 4 |
radius | Number | 否 | 环形半径 | 50 |
isFan | Boolean | 否 | 是否为扇形,type=circle时生效 | false |
borderRadius | Number | 否 | type=line和rect的圆角半径 | 0 |
rx | Number | 否 | type=ellispe椭圆时的长半轴 | 100 |
ry | Number | 否 | type=ellispe椭圆时的短半轴 | 50 |
pathLength | Number | 否 | 自定义图形路径的总长度,如果存在,路径将进行缩放,以便计算各点相当于此值的路径长度 | 1000 |
d | String | 否 | 当type=path,图形的定义路径,必填 | |
isDashed | Boolean | 否 | 进度条是否为虚线 | false |
isBackDashed | Boolean | 否 | 背景是否为虚线 | true |
dashedLength | Number | 否 | 虚线长度 | 5 |
dashedDistance | Number | 否 | 虚线间隔 | 5 |
isTransition | Boolean | 否 | 是否有过度动画 | true |
lineHeight | Number | 否 | type=line时的高度 | 30 |
slot | string | 否 | 自定义显示的内容 |
实例方法
- setProgress(obj): 参数为一个对象{percentage:number,...},属性为以上API所列属性,调用此方法,可重新设置当前进度条样式(重置 type 除外)