This article has not been translated, hope that your can PR to translated it. Help us!

仪表盘
IMPORT MODULE

一种进度展示方式,可以更直观的展示当前的进展情况,通常也可表示占比。

Examples

Basic

基础用法。

expand codeexpand code
import { Platform } from '@angular/cdk/platform';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy } from '@angular/core';

import type { NzSafeAny } from 'ng-zorro-antd/core/types';

@Component({
  selector: 'chart-gauge-basic',
  template: ` <g2-gauge [title]="'核销率'" height="164" [percent]="percent" [color]="color"></g2-gauge> `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChartGaugeBasicComponent implements OnDestroy {
  percent = 36;
  color = '#2f9cff';
  private time$: NzSafeAny;

  constructor(platform: Platform, cdr: ChangeDetectorRef) {
    if (!platform.isBrowser) return;

    this.time$ = setInterval(() => {
      this.percent = parseInt((Math.random() * 100).toString(), 10);
      this.color = this.percent > 50 ? '#f50' : '#2f9cff';
      cdr.detectChanges();
    }, 1000);
  }

  ngOnDestroy(): void {
    clearInterval(this.time$);
  }
}

API

g2-gauge

参数说明类型默认值
[repaint]数据再次变更时是否重绘booleantrue
[delay]延迟渲染,单位:毫秒number0
[title]图表标题string-
[height]图表高度number-
[color]图表颜色string#2F9CFF
[bgColor]图表背景色string#F0F2F5
[percent]进度比例number-
[padding]内边距Array<number | string>[10, 10, 30, 10]
[format]坐标轴格式(text: string, item: {}, index: number) => string-
[theme]定制图表主题string | LooseObject-
(ready)当G2完成初始化后调用EventEmitter<Chart>-