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

水波图
IMPORT MODULE

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

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

代码演示

补贴资金剩余

34%

基础

基础用法。

expand codeexpand code
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]是否显示动画booleantrue
[delay]延迟渲染,单位:毫秒number0
[title]图表标题string,TemplateRef<void>-
[height]图表高度number160
[color]图表颜色string#1890FF
[percent]进度比例number-