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 |
- |