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

水波图
IMPORT MODULE

水波图是一种比例的展示方式,可以更直观的展示关键值的占比。

默认不支持父元素自适应,可以监听父元素的变化并使用 render() 方法来重置渲染。

代码演示

补贴资金剩余

34%

基础

基础用法。

expand code expand code
import { Component } from '@angular/core';

import { G2WaterWaveModule } from '@yelon/chart/water-wave';

@Component({
  selector: 'chart-water-wave-basic',
  template: ` <g2-water-wave [title]="'补贴资金剩余'" [percent]="34" [height]="161" /> `,
  host: {
    '[class.d-block]': 'true'
  },
  standalone: true,
  imports: [G2WaterWaveModule]
})
export class ChartWaterWaveBasicComponent {}

API

g2-water-wave

参数说明类型默认值
[animate]是否显示动画booleantrue
[delay]延迟渲染,单位:毫秒number0
[title]图表标题string,TemplateRef<void>-
[height]图表高度number160
[color]图表颜色string#1890FF
[percent]进度比例number-
Loading...