angular4+百分比进度显示插件

最新推荐文章于 2025-01-25 09:16:12 发布

原创

最新推荐文章于 2025-01-25 09:16:12 发布 · 3.2k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了如何在Angular4项目中使用ng-circle-progress插件来实现百分比进度显示。首先通过npm安装插件，然后在app.module.ts导入并配置，最后在app.component.html中使用组件标签并设置相关参数。

效果展示：

一、在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