This article has not been translated, hope that your can PR to translated it. Help us!
g2-gauge 仪表盘
一种进度展示方式,可以更直观的展示当前的进展情况,通常也可表示占比。
import { G2GaugeModule } from '@delon/chart/gauge';
代码演示
基础
基础用法。
import { Component } from '@angular/core';
@Component({
selector: 'chart-gauge-basic',
template: ` <g2-gauge [title]="'核销率'" height="164" [percent]="percent" [color]="color"></g2-gauge> `,
})
export class ChartGaugeBasicComponent {
percent = 36;
color = '#2f9cff';
constructor() {
setInterval(() => {
this.percent = parseInt((Math.random() * 100).toString(), 10);
this.color = this.percent > 50 ? '#f50' : '#2f9cff';
}, 1000);
}
}
API
g2-gauge
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
[delay] | 延迟渲染,单位:毫秒 | number | 0 |
[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 | - |