1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<canvasid="le-canvas"></canvas>
<script>
/**
*此插件为原创，目前只能一个canvas内一个环形进度条
*后面会最加更新至一个canvas内可嵌多个环形进度条
*内部代码都是原生JS所以可以在vue框架使用也可以套入其他框架
*/
varcanvas_1=newEnableCircle({
id:'le-canvas',//节点标签[必填]id选择器
value:80,//百分比值[必填]
bgColor:'',//背景颜色十六进制[可填]默认为透明;当填了type的vba_color或target的可不填
cirColor:'#e54d42',//进度条颜色十六进制[必填]当填了type的vba_color或target的可不填
textColor:'#f37b1d',//字体颜色十六进制[必填]当填了type的vba_color或target的可不填
type:'shadow',//样式[可填]默认:none样式可选:shadow(添加阴影);vba_color(优先级最高特殊样式)none(无)
lineCap:'butt',//进度条末端类型[可填]默认:butt(平滑);round(圆形线帽)
target:'default',//进度条指定类型[可填]默认:default
size:60,//环形半径[可填]默认:40
lineWidth:14,//进度条宽度[可填]默认:8最高60
open:'between'//进度条开始点[可填]默认:top可选bottom、top、between
})
</scrtipt>
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jQuery