logo

Ant Design Charts

  • Manual
  • Components
  • Examples
  • Options
  • Productsantv logo arrow
  • 2.6.0
  • Component Overview
  • Statistical Charts
    • Chart overview
    • Line
    • Column
    • Bar
    • Area
    • Pie
    • DualAxes
    • Scatter
    • WordCloud
    • Funnel
    • Heatmap
    • Histogram
    • Liquid
    • BidirectionalBar
    • Box
    • Bullet
    • CirclePacking
    • Gauge
    • Radar
    • Rose
    • Sankey
    • Stock
    • Sunburst
    • Treemap
    • Venn
    • Tiny
    • Violin
    • Waterfall
    • RadialBar
  • Relation Graph Components
    • Overview
    • MindMap
    • Fishbone
    • IndentedTree
    • Dendrogram
    • OrganizationChart
    • FlowGraph
    • FlowDirectionGraph
    • NetworkGraph
    • FAQ

Liquid

Previous
Histogram
Next
BidirectionalBar

Resources

Ant Design
Galacea Effects
Umi-React Application Framework
Dumi-Component doc generator
ahooks-React Hooks Library

Community

Ant Financial Experience Tech
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
StackOverflow

more productsMore Productions

Ant DesignAnt Design-Enterprise UI design language
yuqueYuque-Knowledge creation and Sharing tool
EggEgg-Enterprise-class Node development framework
kitchenKitchen-Sketch Tool set
GalaceanGalacean-互动图形解决方案
xtechLiven Experience technology
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

简介

水波图(Liquid)又称涟漪图或波浪图,是一种通过模拟水波纹扩散效果来展示数据变化或进度的可视化图表。其核心特征包括:

  • 动态波动形态:以圆形或环形为基础,通过多层半透明波纹的扩散、叠加或颜色渐变,直观呈现数据的 “强度”“进度” 或 “影响范围”。
  • 隐喻化设计:借用自然水波的扩散原理,将抽象数据转化为具有物理动感的视觉符号(如波纹半径越大表示数值越高)。
  • 交互性优势:常结合动画效果(如波纹缓慢扩散、颜色渐隐),增强数据的叙事性和用户吸引力。

代码演示

更多示例详见水波图

基础用法

水滴形状

带背景

自定义形状

配置项

通用属性参考:通用配置

概览

配置项说明类型默认值
percent数据(0 ~ 1)number-
title用于指定图表的标题内容,详见标题object(可选)-
style图表样式object(可选)-
onReady图表加载回调,用于后续的事件事件绑定Function(可选)-
animate动画作为可视化的重要组成部分,能显著提高数据可视化的表现力,详见动画object(可选)-
annotations视图好比一个画板,Liquid 组件默认在其上绘制了一个水波图,我们可以通过 annotations 在上面叠加更多的图层,详见标注Array(可选)-

style

配置 liquid 标记的样式。

属性描述类型默认值必选
shape形状rect | circle | pin | trianglecircle
stroke边框颜色string-
fill水波颜色string-
outlineBorder边框宽度number2
outlineDistance内间距number0
waveLength波长number192
waveCount波数number3
backgroundFill背景颜色string-
contentText文本内容string-
contentFill文本颜色string-
contentFontSize文本大小string-

shape

liquid 标记内置支持的形状如下:

形状描述示例
rect矩形
circle圆形
pin水滴
triangle三角

如果需要自定义形状,可以通过自定义 shape 提供实现。 其中, 回调 (x, y, r, w, h) => string, 传入参数分别为 x y 中心点坐标, r 图表可画圆最大半径, w h 图表可画宽高,从而画出想要的形状,需要对 svg 或者 canvas 有一定理解。

事件

详见选项-事件。

方法

详见图表概览-图表方法。