g2-water-wave 水波图 - 图1 This article has not been translated, hope that your can PR to translated it. Help us!g2-water-wave 水波图 - 图2

g2-water-wave 水波图

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

  1. import { G2WaterWaveModule } from '@delon/chart/water-wave';

代码演示

g2-water-wave 水波图 - 图3

基础

基础用法。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'chart-water-wave-basic',
  4. template: `
  5. <g2-water-wave [title]="'补贴资金剩余'" [percent]="34" [height]="161"></g2-water-wave>
  6. `,
  7. host: {
  8. '[class.d-block]': 'true'
  9. }
  10. })
  11. export class ChartWaterWaveBasicComponent {}

API

g2-water-wave

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