
一、在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   
'auto'   
文字显示为标题。当标题等于'自动'时显示百分比。   
 
titleFormat   
Function   
undefined   
一个回调函数来格式化标题。它返回一个字符串或一个字符串数组。   
 
titleColor   
string   
'#444444'   
标题的字体颜色   
 
titleFontSize   
string   
'20'   
标题的字体大小   
 
subtitle   
string|Array   
'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类名称   
 
