ethan / ant-admin-pro

title: 
  en-US: Charts
  zh-CN: Charts
subtitle: 图表
order: 2
cols: 2

Ant Design Pro 提供的业务中常用的图表类型，都是基于 G2 按照 Ant Design 图表规范封装，需要注意的是 Ant Design Pro 的图表组件以套件形式提供，可以任意组合实现复杂的业务需求。

因为结合了 Ant Design 的标准设计，本着极简的设计思想以及开箱即用的理念，简化了大量 API 配置，所以如果需要灵活定制图表，可以参考 Ant Design Pro 图表实现，自行基于 G2 封装图表组件使用。

API

ChartCard

参数	说明	类型	默认值
title	卡片标题	ReactNode\	string
action	卡片操作	ReactNode	-
total	数据总量	ReactNode \	number
footer	卡片底部	ReactNode	-
contentHeight	内容区域高度	number	-
avatar	右侧图标	React.ReactNode	-

MiniBar

参数	说明	类型	默认值
color	图表颜色	string	#1890FF
height	图表高度	number	-
data	数据	array<{x, y}>	-

MiniArea

参数	说明	类型	默认值
color	图表颜色	string	rgba(24, 144, 255, 0.2)
borderColor	图表边颜色	string	#1890FF
height	图表高度	number	-
line	是否显示描边	boolean	false
animate	是否显示动画	boolean	true
xAxis	x 轴配置	object	-
yAxis	y 轴配置	object	-
data	数据	array<{x, y}>	-

MiniProgress

参数	说明	类型	默认值
target	目标比例	number	-
color	进度条颜色	string	-
strokeWidth	进度条高度	number	-
percent	进度比例	number	-

Bar

参数	说明	类型	默认值
title	图表标题	ReactNode\	string
color	图表颜色	string	rgba(24, 144, 255, 0.85)
margin	图表内部间距	array	[32, 0, 32, 40]
height	图表高度	number	-
data	数据	array<{x, y}>	-
autoLabel	在宽度不足时，自动隐藏 x 轴的 label	boolean	true

Pie

参数	说明	类型	默认值
animate	是否显示动画	boolean	true
color	图表颜色	string	rgba(24, 144, 255, 0.85)
height	图表高度	number	-
hasLegend	是否显示 legend	boolean	false
margin	图表内部间距	array	[24, 0, 24, 0]
percent	占比	number	-
tooltip	是否显示 tooltip	boolean	true
valueFormat	显示值的格式化函数	function	-
title	图表标题	ReactNode	string
subTitle	图表子标题	ReactNode	string
total	图标中央的总数	string	-

Radar

参数	说明	类型	默认值
title	图表标题	ReactNode\	string
height	图表高度	number	-
hasLegend	是否显示 legend	boolean	false
margin	图表内部间距	array	[24, 30, 16, 30]
data	图标数据	array<{name,label,value}>	-

Gauge

参数	说明	类型	默认值
title	图表标题	ReactNode\	string
height	图表高度	number	-
color	图表颜色	string	#2F9CFF
bgColor	图表背景颜色	string	#F0F2F5
percent	进度比例	number	-

WaterWave

参数	说明	类型	默认值
title	图表标题	ReactNode\	string
height	图表高度	number	-
color	图表颜色	string	#1890FF
percent	进度比例	number	-

TagCloud

参数	说明	类型	默认值
data	标题	Array	-
height	高度值	number	-

TimelineChart

参数	说明	类型	默认值
data	标题	Array	-
titleMap	指标别名	Object{y1: '客流量', y2: '支付笔数'}	-
height	高度值	number	400

Field

参数	说明	类型	默认值
label	标题	ReactNode\	string
value	值	ReactNode\	string