This article has not been translated, hope that your can PR to translated it. Help us!
g2-water-wave 水波图
水波图是一种比例的展示方式,可以更直观的展示关键值的占比。
import { G2WaterWaveModule } from '@delon/chart/water-wave';
代码演示
基础
基础用法。
import { Component } from '@angular/core';
@Component({
selector: 'chart-water-wave-basic',
template: `
<g2-water-wave [title]="'补贴资金剩余'" [percent]="34" [height]="161"></g2-water-wave>
`,
host: {
'[class.d-block]': 'true'
}
})
export class ChartWaterWaveBasicComponent {}
API
g2-water-wave
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
[animate] | 是否显示动画 | boolean | true |
[delay] | 延迟渲染,单位:毫秒 | number | 0 |
[title] | 图表标题 | string,TemplateRef<void> | - |
[height] | 图表高度 | number | 160 |
[color] | 图表颜色 | string | #1890FF |
[percent] | 进度比例 | number | - |