AntV Infographic
Home
Learn
Reference
Gallery
Icon
Editor
AI
Enterprise

目录

  • Overview
  • ChartColumn
  • CompareBinaryHorizontal
  • CompareHierarchyLeftRight
  • CompareHierarchyRow
  • HierarchyTree
  • ListRow
  • ListColumn
  • ListGrid
  • ListPyramid
  • ListWaterfall
  • ListSector
  • Quadrant
  • RelationCircle
  • RelationNetwork
  • SequenceAscendingStairs3d
  • SequenceAscendingSteps
  • SequenceCircleArrows
  • SequenceCircular
  • SequenceColorSnakeSteps
  • SequenceCylinders3d
  • SequenceFilterMesh
  • SequenceHorizontalZigzag
  • SequenceMountain
  • SequencePyramid
  • SequenceRoadmapVertical
  • SequenceSnakeSteps
  • SequenceSteps
  • SequenceTimeline
  • SequenceZigzagPucks3d
  • SequenceZigzagSteps
  • Infographic
    • API
    • 配置项
    • 类型定义
    • 导出内容
  • JSX
    • 原语节点
    • 创建布局
    • 工具函数
  • 设计资产
    • 内置结构
    • 内置数据项
    • 内置模版
    • 内置主题
    • 内置色板
    • 内置图案
    • 内置组件
API Reference
设计资产

内置结构

以下为内置结构的样式特点与参数类型(未列出的 props 继承自 BaseStructureProps)。

使用时通过下方 id 指定。

ChartColumn

id: chart-column

垂直柱状图,支持正负值并在柱体上方/下方显示数值,底部排列数据项。

TS
export interface ChartColumnProps extends BaseStructureProps { columnGap?: number; // 柱间距 columnWidth?: number; // 柱宽 padding?: Padding; // 外边距 showValue?: boolean; // 是否显示数值 valueFormatter?: (value: number, datum: ItemDatum) => string; // 数值格式化 }

CompareBinaryHorizontal

id: compare-binary-horizontal

左右对称的二元对比结构,中间可插入 “VS” 等分隔符,左右子项纵向排列。

TS
export interface CompareBinaryHorizontalProps extends BaseStructureProps { gap?: number; // 同侧子项间距 groupGap?: number; // 子项组到分隔符距离 opposite?: boolean; // 左右是否相对 flipped?: boolean; // 是否整体翻转左右 dividerType?: string; // 分隔符类型 }

CompareHierarchyLeftRight

id: compare-hierarchy-left-right

左右两棵层级树的对比,可选择环绕式布局或平铺,支持圆点/分割线等装饰。

TS
export interface CompareHierarchyLeftRightProps extends BaseStructureProps { gap?: number; // 同侧节点垂直间距 groupGap?: number; // 左右根节点间距 surround?: boolean; // 子节点是否环绕根节点 decoration?: 'none' | 'dot-line' | 'arc-dot' | 'split-line'; // 装饰样式 flipRoot?: boolean; // 根节点方向翻转 flipLeaf?: boolean; // 叶子节点方向翻转 }

CompareHierarchyRow

id: compare-hierarchy-row

横排的多列层级列表,顶层作为列头,子项在列内纵向排列,可开启浅色列背景。

TS
export interface CompareHierarchyRowProps extends BaseStructureProps { gap?: number; // 列间距 itemGap?: number; // 子项垂直间距 columnWidth?: number; // 列宽 itemPadding?: number; // 子项左右内边距 showColumnBackground?: boolean; // 是否显示列背景 columnBackgroundAlpha?: number; // 背景透明度 }

HierarchyTree

id: hierarchy-tree

可配置的树形结构,支持直线/曲线连线、箭头/节点标记、分支/层级着色等丰富样式。

TS
export interface HierarchyTreeProps extends BaseStructureProps { levelGap?: number; // 父子垂直间距 nodeGap?: number; // 同层水平间距 edgeType?: 'straight' | 'curved'; // 连接线类型 edgeColorMode?: 'solid' | 'gradient'; // 线条颜色模式 edgeWidth?: number; // 线宽 edgeStyle?: 'solid' | 'dashed'; // 线型 edgeDashPattern?: string; // 自定义虚线 edgeCornerRadius?: number; // 直线圆角 edgeOffset?: number; // 线与节点间距 edgeOrigin?: 'center' | 'distributed'; // 起点模式 edgeOriginPadding?: number; // 分布式起点内边距 edgeMarker?: 'none' | 'dot' | 'arrow'; // 标记样式 markerSize?: number; // 标记尺寸 colorMode?: 'level' | 'branch' | 'node-flat'; // 节点着色模式 }

ListRow

id: list-row

水平排布的列表,可选交错(zigzag)上下对齐。

TS
export interface ListRowProps extends BaseStructureProps { gap?: number; // 数据项间距 zigzag?: boolean; // 是否上下交错 }

ListColumn

id: list-column

竖向排布的列表,可选宽度和左右翻转的锯齿效果。

TS
export interface ListColumnProps extends BaseStructureProps { width?: number; // 宽度 gap?: number; // 数据项间距 zigzag?: boolean; // 是否左右交错 }

ListGrid

id: list-grid

规则网格列表,支持列数和间距配置,可选交错垂直翻转。

TS
export interface ListGridProps extends BaseStructureProps { columns?: number; // 列数 gap?: number; // 网格间距 zigzag?: boolean; // 是否垂直翻转交错 }

ListPyramid

id: list-pyramid

金字塔式分层网格,每层数据项居中放置,层间距可调。

TS
export interface ListPyramidProps extends BaseStructureProps { gap?: number; // 同层间距 levelGap?: number; // 层间距 }

ListWaterfall

id: list-waterfall

”瀑布流”布局,按列均分并叠加阶梯偏移。

TS
export interface ListWaterfallProps extends BaseStructureProps { columns?: number; // 列数 gap?: number; // 数据项间距 stepOffset?: number; // 阶梯偏移 }

ListSector

id: list-sector

环形/扇形分区,每个扇区内放置数据项,中心区域用于标题。

TS
export interface ListSectorProps extends BaseStructureProps { outerRadius?: number; // 外半径 innerRadius?: number; // 内半径 startAngle?: number; // 起始角 endAngle?: number; // 结束角 gapAngle?: number; // 间隔角 }

Quadrant

id: quadrant

四象限布局,可选坐标轴与虚线样式。

TS
export interface QuadrantProps extends BaseStructureProps { quadrantWidth?: number; // 单象限宽度 quadrantHeight?: number; // 单象限高度 showAxis?: boolean; // 是否显示坐标轴 dashedAxis?: boolean; // 坐标轴是否虚线 }

RelationCircle

id: relation-circle

环形关系图,节点沿圆周分布,可从顶部或等距起始。

TS
export interface RelationCircleProps extends BaseStructureProps { radius?: number; // 圆半径 startMode?: 'top' | 'equal'; // 起始角模式 }

RelationNetwork

id: relation-network

力导向关系网络,中心节点向外辐射,可切换是否显示连线。

TS
export interface RelationNetworkProps extends BaseStructureProps { spacing?: number; // 节点间距(力导向距离) showConnections?: boolean; // 是否显示连线 }

SequenceAscendingStairs3d

id: sequence-ascending-stairs3d

3D 阶梯方块从左后向右前递增,方块右侧展示数据项。

TS
export interface SequenceAscendingStairs3dProps extends BaseStructureProps { cubeWidth?: number; // 方块宽度(影响整体缩放) }

SequenceAscendingSteps

id: sequence-ascending-steps

右上走向的阶梯式时间线,节点随步长上升。

TS
export interface SequenceAscendingStepsProps extends BaseStructureProps { hGap?: number; // 水平步长 vGap?: number; // 垂直步长 }

SequenceCircleArrows

id: sequence-circle-arrows

圆环路径串联箭头,节点贴着弧形分布。

TS
export interface SequenceCircleArrowsProps extends BaseStructureProps { radius?: number; // 圆半径 arrowSize?: number; // 箭头大小 strokeWidth?: number; // 线条宽度 }

SequenceCircular

id: sequence-circular

同心圆弧切片(类似环形进度),扇形上方外圈悬挂数据项与图标。

TS
export interface SequenceCircularProps extends BaseStructureProps { outerRadius?: number; // 外弧半径 innerRadius?: number; // 内弧半径 itemDistance?: number; // 数据项离中心距离 gapAngle?: number; // 扇区间隙角 iconRadius?: number; // 图标圆半径 iconBgRadius?: number; // 图标背景半径 iconSize?: number; // 图标大小 }

SequenceColorSnakeSteps

id: sequence-color-snake-steps

彩色折返蛇形路径,行间用弧线连接,可配圆环描边。

TS
export interface SequenceColorSnakeStepsProps extends BaseStructureProps { gap?: number; // 同行数据项间距 itemsPerRow?: number; // 每行数量 rowGap?: number; // 行间距 columnGap?: number; // 行首水平偏移 circleStrokeWidth?: number; // 圆弧描边宽度 }

SequenceCylinders3d

id: sequence-cylinders3d

3D 圆柱正反交错排列,随序号逐步加高,可控制深度与文本对齐。

TS
export interface sequenceCylinders3dProps extends BaseStructureProps { cylinderRx?: number; // 圆柱横向半径 cylinderRy?: number; // 圆柱纵向半径 baseHeight?: number; // 起始高度 heightIncrement?: number; // 高度增量 horizontalSpacing?: number; // 左右间距 depthSpacing?: number; // 前后层间距 itemVerticalAlign?: 'top' | 'center' | 'bottom'; // 文本垂直对齐 itemVerticalOffset?: number; // 文本垂直偏移 firstDecorationWidth?: number; // 左侧装饰宽度 }

SequenceFilterMesh

id: sequence-filter-mesh

过滤网格样式,箭头穿过滤斗,内部粒子随颜色渲染。

TS
export interface SequenceFilterMeshProps extends BaseStructureProps { gap?: number; // 数据项间距 }

SequenceHorizontalZigzag

id: sequence-horizontal-zigzag

水平卡片折线时间线,奇偶节点上下跳跃并带圆点指示。

TS
export interface SequenceHorizontalZigzagProps extends BaseStructureProps { gap?: number; // 卡片间距 cardPadding?: number; // 卡片内边距 }

SequenceMountain

id: sequence-mountain

渐进山脉轮廓,随序号升高变宽,并在顶部叠加阳光、云朵等装饰。

TS
export interface SequenceMountainProps extends BaseStructureProps { gap?: number; // 山峰间距 minHeight?: number; // 最小高度 maxHeight?: number; // 最大高度 minWidth?: number; // 最小宽度 maxWidth?: number; // 最大宽度 }

SequencePyramid

id: sequence-pyramid

右侧文本 + 左侧金字塔分层,层宽逐级收窄并填充渐变。

TS
export interface SequencePyramidProps extends BaseStructureProps { gap?: number; // 层间距 width?: number; // 总宽 pyramidWidth?: number; // 金字塔宽度 itemHeight?: number; // 文本区域高度 }

SequenceRoadmapVertical

id: sequence-roadmap-vertical

垂直公路样式的路线图,左右交替的节点与图标编号。

TS
export interface SequenceRoadmapVerticalProps extends BaseStructureProps { spacing?: number; // 节点间距 flipped?: boolean; // 是否左右反转 }

SequenceSnakeSteps

id: sequence-snake-steps

蛇形网格路径,行内用箭头串联,奇偶行反向排列。

TS
export interface SequenceSnakeStepsProps extends BaseStructureProps { gap?: number; // 同行间距 itemsPerRow?: number; // 每行数量 rowGap?: number; // 行间距 }

SequenceSteps

id: sequence-steps

直线步骤箭头链,节点等距水平排列。

TS
export interface SequenceStepsProps extends BaseStructureProps { gap?: number; // 数据项间距 }

SequenceTimeline

id: sequence-timeline

垂直时间轴,左侧渐变主线,节点标有 STEP 标签。

TS
export interface SequenceTimelineProps extends BaseStructureProps { gap?: number; // 数据项间距 lineOffset?: number; // 轴线偏移 }

SequenceZigzagPucks3d

id: sequence-zigzag-pucks3d

3D 圆盘交错排列,顶部带序号,文字在圆盘上方/下方交替。

TS
export interface SequenceZigzagPucks3dProps extends BaseStructureProps { gap?: number; // 圆盘间距 }

SequenceZigzagSteps

id: sequence-zigzag-steps

”W” 型折线路径,节点配光晕与装饰图案,支持自定义步长与图标尺寸。

TS
export interface SequenceZigzagStepsProps extends BaseStructureProps { dx?: number; // 水平步长 dy?: number; // 垂直步长 iconSize?: number; // 图标尺寸 }
Previous设计资产
Next内置数据项

AntV Infographic
Copyright © Ant Group Co.
Docs
Quick Start
Core Concepts
Custom Design
Infographic Theory
API Reference
JSX
API
Design Assets
More
More Examples
AI Generated Infographics
GitHub
Contribute
Friendly Links
AntV
G2
G6
L7
TS
export interface ChartColumnProps extends BaseStructureProps {
columnGap?: number; // 柱间距
columnWidth?: number; // 柱宽
padding?: Padding; // 外边距
showValue?: boolean; // 是否显示数值
valueFormatter?: (value: number, datum: ItemDatum) => string; // 数值格式化
}
TS
export interface CompareBinaryHorizontalProps extends BaseStructureProps {
gap?: number; // 同侧子项间距
groupGap?: number; // 子项组到分隔符距离
opposite?: boolean; // 左右是否相对
flipped?: boolean; // 是否整体翻转左右
dividerType?: string; // 分隔符类型
}
TS
export interface CompareHierarchyLeftRightProps extends BaseStructureProps {
gap?: number; // 同侧节点垂直间距
groupGap?: number; // 左右根节点间距
surround?: boolean; // 子节点是否环绕根节点
decoration?: 'none' | 'dot-line' | 'arc-dot' | 'split-line'; // 装饰样式
flipRoot?: boolean; // 根节点方向翻转
flipLeaf?: boolean; // 叶子节点方向翻转
}
TS
export interface CompareHierarchyRowProps extends BaseStructureProps {
gap?: number; // 列间距
itemGap?: number; // 子项垂直间距
columnWidth?: number; // 列宽
itemPadding?: number; // 子项左右内边距
showColumnBackground?: boolean; // 是否显示列背景
columnBackgroundAlpha?: number; // 背景透明度
}
TS
export interface HierarchyTreeProps extends BaseStructureProps {
levelGap?: number; // 父子垂直间距
nodeGap?: number; // 同层水平间距
edgeType?: 'straight' | 'curved'; // 连接线类型
edgeColorMode?: 'solid' | 'gradient'; // 线条颜色模式
edgeWidth?: number; // 线宽
edgeStyle?: 'solid' | 'dashed'; // 线型
edgeDashPattern?: string; // 自定义虚线
edgeCornerRadius?: number; // 直线圆角
edgeOffset?: number; // 线与节点间距
edgeOrigin?: 'center' | 'distributed'; // 起点模式
edgeOriginPadding?: number; // 分布式起点内边距
edgeMarker?: 'none' | 'dot' | 'arrow'; // 标记样式
markerSize?: number; // 标记尺寸
colorMode?: 'level' | 'branch' | 'node-flat'; // 节点着色模式
}
TS
export interface ListRowProps extends BaseStructureProps {
gap?: number; // 数据项间距
zigzag?: boolean; // 是否上下交错
}
TS
export interface ListColumnProps extends BaseStructureProps {
width?: number; // 宽度
gap?: number; // 数据项间距
zigzag?: boolean; // 是否左右交错
}
TS
export interface ListGridProps extends BaseStructureProps {
columns?: number; // 列数
gap?: number; // 网格间距
zigzag?: boolean; // 是否垂直翻转交错
}
TS
export interface ListPyramidProps extends BaseStructureProps {
gap?: number; // 同层间距
levelGap?: number; // 层间距
}
TS
export interface ListWaterfallProps extends BaseStructureProps {
columns?: number; // 列数
gap?: number; // 数据项间距
stepOffset?: number; // 阶梯偏移
}
TS
export interface ListSectorProps extends BaseStructureProps {
outerRadius?: number; // 外半径
innerRadius?: number; // 内半径
startAngle?: number; // 起始角
endAngle?: number; // 结束角
gapAngle?: number; // 间隔角
}
TS
export interface QuadrantProps extends BaseStructureProps {
quadrantWidth?: number; // 单象限宽度
quadrantHeight?: number; // 单象限高度
showAxis?: boolean; // 是否显示坐标轴
dashedAxis?: boolean; // 坐标轴是否虚线
}
TS
export interface RelationCircleProps extends BaseStructureProps {
radius?: number; // 圆半径
startMode?: 'top' | 'equal'; // 起始角模式
}
TS
export interface RelationNetworkProps extends BaseStructureProps {
spacing?: number; // 节点间距(力导向距离)
showConnections?: boolean; // 是否显示连线
}
TS
export interface SequenceAscendingStairs3dProps extends BaseStructureProps {
cubeWidth?: number; // 方块宽度(影响整体缩放)
}
TS
export interface SequenceAscendingStepsProps extends BaseStructureProps {
hGap?: number; // 水平步长
vGap?: number; // 垂直步长
}
TS
export interface SequenceCircleArrowsProps extends BaseStructureProps {
radius?: number; // 圆半径
arrowSize?: number; // 箭头大小
strokeWidth?: number; // 线条宽度
}
TS
export interface SequenceCircularProps extends BaseStructureProps {
outerRadius?: number; // 外弧半径
innerRadius?: number; // 内弧半径
itemDistance?: number; // 数据项离中心距离
gapAngle?: number; // 扇区间隙角
iconRadius?: number; // 图标圆半径
iconBgRadius?: number; // 图标背景半径
iconSize?: number; // 图标大小
}
TS
export interface SequenceColorSnakeStepsProps extends BaseStructureProps {
gap?: number; // 同行数据项间距
itemsPerRow?: number; // 每行数量
rowGap?: number; // 行间距
columnGap?: number; // 行首水平偏移
circleStrokeWidth?: number; // 圆弧描边宽度
}
TS
export interface sequenceCylinders3dProps extends BaseStructureProps {
cylinderRx?: number; // 圆柱横向半径
cylinderRy?: number; // 圆柱纵向半径
baseHeight?: number; // 起始高度
heightIncrement?: number; // 高度增量
horizontalSpacing?: number; // 左右间距
depthSpacing?: number; // 前后层间距
itemVerticalAlign?: 'top' | 'center' | 'bottom'; // 文本垂直对齐
itemVerticalOffset?: number; // 文本垂直偏移
firstDecorationWidth?: number; // 左侧装饰宽度
}
TS
export interface SequenceFilterMeshProps extends BaseStructureProps {
gap?: number; // 数据项间距
}
TS
export interface SequenceHorizontalZigzagProps extends BaseStructureProps {
gap?: number; // 卡片间距
cardPadding?: number; // 卡片内边距
}
TS
export interface SequenceMountainProps extends BaseStructureProps {
gap?: number; // 山峰间距
minHeight?: number; // 最小高度
maxHeight?: number; // 最大高度
minWidth?: number; // 最小宽度
maxWidth?: number; // 最大宽度
}
TS
export interface SequencePyramidProps extends BaseStructureProps {
gap?: number; // 层间距
width?: number; // 总宽
pyramidWidth?: number; // 金字塔宽度
itemHeight?: number; // 文本区域高度
}
TS
export interface SequenceRoadmapVerticalProps extends BaseStructureProps {
spacing?: number; // 节点间距
flipped?: boolean; // 是否左右反转
}
TS
export interface SequenceSnakeStepsProps extends BaseStructureProps {
gap?: number; // 同行间距
itemsPerRow?: number; // 每行数量
rowGap?: number; // 行间距
}
TS
export interface SequenceStepsProps extends BaseStructureProps {
gap?: number; // 数据项间距
}
TS
export interface SequenceTimelineProps extends BaseStructureProps {
gap?: number; // 数据项间距
lineOffset?: number; // 轴线偏移
}
TS
export interface SequenceZigzagPucks3dProps extends BaseStructureProps {
gap?: number; // 圆盘间距
}
TS
export interface SequenceZigzagStepsProps extends BaseStructureProps {
dx?: number; // 水平步长
dy?: number; // 垂直步长
iconSize?: number; // 图标尺寸
}