arc-progress.jscanvas绘制圆弧进度条github地址
安装npminstallarc-progress-S选择直接导入js文件使用constcustomText=[{text:'%',size:'12px',color:'#000',x:142,y:102}];constarcProgress=newArcProgress({el:'#progress-container',progress:.68,speed:5,value:'5439.92',size:200,customText,observer(e,t){console.log('监视器animationprogress',e,t);},animationEnd(e){console.log('动画执行结束',e);}});如果在react或者vue中使用，可以在实例化中获取React中真实dom节点的生命周期：importArcProgressfrom'arc-progress'；classAppextendsReact.Component{componentDidMount(){constcustomText=[{text:'%',size:'12px',color:'#000',x:142,y:102}];constarcProgress=newArcProgress({el:'#progress-container',progress:.68,speed:5,value:'5439.92',size:200,customText,observer(e,t){console.log('监视器动画进度',e,t);},animationEnd(e){console.log('动画执行结束',e);}});}render(){return(
);}}options传入以下可选optionOptiontypeDescriptionelstring或dom（必填）容器类或id名称，也可以直接传入dom节点的引用sizenumber生成进度条画布容器的大小，默认为200progressnumber（必填）)设置进度条的进度，取值范围0-1textstring设置进度条的文字arcStartnumber设置圆环起点，圆环结束点见arcEndnumber，具体用法见下文thicknessnumber设置环形进度条的粗细fillThicknessnumber设置环形进度条填充内容的粗细，如果不设置此项，默认与粗细一致emptyColorstring设置圆形环形进度条空白部分的颜色。fillColorstringobject设置圆环进度条填充部分的样式。可以设置纯色或渐变色，也可以用图片填充。具体用法见lineCapstring设置环形进度条结束的类型，有3个可选值分别是：butt,round,square默认值为roundspeednumber设置动画速度阈值，范围为-100到100，默认为0文字样式，具体用法见下文customTextarray设置自定义文字内容，具体用法见下文实例化NameDescriptionupdateProgress更新进度条的方法，传递参数optios同上（没有el参数）destroy销毁进度条的方法Options说明arcStart和arcEnd
如图所示，标出了圆弧的起点和焦点，方向为顺时针方向。如果想画圆形进度条，可以设置arcStart为-90，arcEnd为270。如果想画半圆，可以设置arcStart为180，arcEnd为360。您可以根据需要调整绘图的开始和结束角度。fillColorfillColor是填充进度条的颜色，可以传入颜色值来定义颜色，如(#fe4d3c)。如果要使用渐变色填充，需要将参数设置为对象类型，例如{gradient:[color1,color2,color2]}，会生成三种颜色的径向渐变。如果使用图片填充，需要将参数设置为object格式{image:url}，传入图片的url地址。例如，当fillColor:{image:'http://img.com/fillImg'}时，图像将用于填充。textStyle设置传入文本参数的文本样式。它需要是一个对象类型。可选内容如下。文本对齐的y轴customTextcustomText选项可以自定义文本内容。它的格式是一个数组，可以定义多个文本。每种用法都与textStyle参数一致，只是文本字段多了一些。NameTypeDescriptiontextstring设置文字内容others其他参数内容与textStyle的用法一致
