Ionic圆环进度条

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/shichuwu/article/details/81839193

       最近小编做的项目有个业务需求是对于自己的情况和目标有一个进度环的展示.

       如图:

       

      代码如下:

Ts文件中:

先定义两个变量max以及current

  //圆环进度条
  color: string = '#1890fb';
  backgound: string = '#eaeaea';
  radius: number = 100;
  current:number=0;
  max:number=0;

  //圆形进度条函数
  getOverlayStyle() {
    let transform = 'translateY(-50%) ' + 'translateX(-50%)';
    return {
      'top': '50%',
      'bottom': 'auto',
      'left': '50%',
      'transform': transform,
      '-moz-transform': transform,
      '-webkit-transform': transform,
      'font-size': this.radius / 3.5 + 'px'
    };
  }

HTML页面:对于页面内容使用双向绑定同步数据

        <div class="progress-wrapper">
          <div class="current" [ngStyle]="getOverlayStyle()">
            <p style="font-size: 16px;">当前情况</p>
            <p style="font-size: 26px;">{{ current }}</p>
            <p style="font-size: 16px;">目标{{ max }}分</p>
          </div>
    
          <round-progress [current]="current" [max]="max" [color]="color" [background]="background">
          </round-progress>
        </div>