效果展示:
![](//img-blog.csdn.net/20180319141802405?watermark/2/text/Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NjM1MTUz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
一、在npm社区中搜索 :
ng-circle-progress
二、在项目目录下安装下载
npm install ng-circle-progress --save
三、在app.module.ts文件中导入NgCircleProgressModule模块,
并在@NgModule装饰器中使用NgCircleProgressModule.forRoot()的方法,里面的参数
是个对象字面量
NgCircleProgressModule.
forRoot({
radius:
100,
outerStrokeWidth:
16,
innerStrokeWidth:
8,
outerStrokeColor:
"#78C000",
innerStrokeColor:
"#C7E596",
animationDuration:
300
})
四、在app.component.html中导入标签
<circle-progress
[percent]="85"
[radius]="100"
[outerStrokeWidth]="16"
[innerStrokeWidth]="8"
[outerStrokeColor]="'#78C000'"
[innerStrokeColor]="'#C7E596'"
[animation]="true"
[animationDuration]="300"
></circle-progress>
其中参数有:
选项 |
类型 |
默认 |
描述 |
percent |
number |
0 |
您想要显示的百分比数 |
maxPercent |
number |
1000 |
您想要显示的最大百分比数 |
radius |
number |
90 |
圆的半径 |
clockwise |
boolean |
true |
是否顺时针或逆时针旋转 |
showTitle |
boolean |
true |
是否显示标题 |
showSubtitle |
boolean |
true |
是否显示字幕 |
showUnits |
boolean |
true |
是否显示单位 |
showBackground |
boolean |
true |
是否显示背景圈 |
showInnerStroke |
boolean |
true |
是否显示内部中风 |
backgroundStroke |
string |
'transparent' |
背景描边颜色 |
backgroundStrokeWidth |
number |
0 |
背景圈的笔画宽度 |
backgroundPadding |
number |
5 |
填充的背景圈子 |
backgroundColor |
string |
'transparent' |
背景颜色 |
backgroundOpacity |
number |
1 |
背景颜色的不透明度 |
space |
number |
4 |
外圈和内圈之间的空间 |
toFixed |
number |
0 |
在标题中使用固定的数字符号 |
renderOnClick |
boolean |
true |
渲染组件时单击 |
units |
string |
'%' |
单位显示在标题旁边 |
unitsFontSize |
string |
'10' |
单位的字体大小 |
unitsColor |
string |
'#444444' |
单位的字体颜色 |
outerStrokeWidth |
number |
8 |
外圈的行程宽度(进度圈) |
outerStrokeColor |
sting |
'#78C000' |
外圈的笔触颜色 |
outerStrokeLinecap |
sting |
'round' |
外圈的笔画线条。可能的值(屁股,圆形,方形,继承) |
innerStrokeWidth |
number |
4 |
内圈的行程宽度 |
innerStrokeColor |
sting |
'#C7E596' |
内圈的笔触颜色 |
title |
string|Array<String> |
'auto' |
文字显示为标题。当标题等于'自动'时显示百分比。 |
titleFormat |
Function |
undefined |
一个回调函数来格式化标题。它返回一个字符串或一个字符串数组。 |
titleColor |
string |
'#444444' |
标题的字体颜色 |
titleFontSize |
string |
'20' |
标题的字体大小 |
subtitle |
string|Array<String> |
'Percent' |
文字显示为副标题 |
subtitleFormat |
Function |
undefined |
一个回调函数来格式化字幕。它返回一个字符串或一个字符串数组。 |
subtitleColor |
string |
'#A9A9A9' |
字幕的字体颜色 |
subtitleFontSize |
string |
'10' |
字幕的字体大小 |
animation |
boolean |
true |
渲染时是否为外部圆圈设置动画 |
animateTitle |
boolean |
true |
是否在渲染时为标题添加动画 |
animateSubtitle |
boolean |
false |
是否在渲染时为字幕添加动画 |
animationDuration |
number |
500 |
动画持续时间以微秒为单位 |
class |
string |
'' |
SVG元素的CSS类名称 |
formatSubtitle = (percent: number) : string => {
if(percent >= 100){
return "Congratulations!"
}else if(percent >= 50){
return "Half"
}else if(percent > 0){
return "Just began"
}else {
return "Not started"
}
}
或者写成以下形式
formatSubtitle
(percent: number) : string {
if(percent >= 100){
return "Congratulations!"
}else if(percent >= 50){
return "Half"
}else if(percent > 0){
return "Just began"
}else {
return "Not started"
}
}
然后再在html页面以插值表达式{{ formatSubtitle(
number类型的任意值) }}的方式调用。