hemy-progress

hemy-progress在JS中使用

---

文档

Home

• JS
• React
• Vue
• Vue3

安装

通过 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 除外)