BidirectionalBar | Ant Design Charts

简介

对称条形图（BidirectionalBar）是一种以坐标轴为中心，向左右两侧延伸条形的图表类型，用于展示正负值数据或双向对比关系。其核心特征包括：

双向布局：以 Y 轴（或 X 轴）为对称轴，左侧条形表示负值或参照组，右侧表示正值或实验组。
视觉平衡感：通过对称布局强化数据的对比效果，适合展示 “增加 / 减少”“输入 / 输出”“优势 / 劣势” 等对立关系。
数据映射：
- 条形长度 → 数值大小（绝对值），
- 方向 → 正负属性（左负右正），
- 颜色 → 类别区分（如蓝色代表正向，红色代表负向）。

代码演示

更多示例详见对称条形图

基础用法

垂直对称条形图

配置项

通用属性参考：通用配置

概览

配置项	说明	类型	默认值
data	数据	Array	[]
xField	横轴字段	string	-
yField	纵轴字段	string[]	-
axis	用于建立数据与视觉位置的映射关系，详见坐标轴	object（可选）	-
label	数据标签是给图表添加标注的手段之一，详见标签	object（可选）	-
tooltip	用于动态展示数据点的详细信息，详见提示	object（可选）	-
style	视觉样式，配置项详见绘图属性	object（可选）	-
theme	用于控制图表的整体外观，包括颜色、字体、边距等视觉属性，详见主题	string \| object（可选）	`light`
onReady	图表加载回调，用于后续的事件事件绑定	Function（可选）	-
scale	将抽象数据映射为视觉数据，详见比例尺	object（可选）	-
animate	动画作为可视化的重要组成部分，能显著提高数据可视化的表现力，详见动画	object（可选）	-
interaction	提供了按需探索数据的能力，详见交互	object（可选）	-
state	实现交互反馈、高亮、选中等效果，详见状态，不同交互下图表样式	object（可选）	-
annotations	视图好比一个画板，`BidirectionalBar` 组件默认在其上绘制了一个对称条形图，我们可以通过 annotations 在上面叠加更多的图层，详见标注	Array（可选）	-

事件

详见选项-事件。

方法

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

特有

yField

optional string[]

Y 轴字段

layout

optional vertical | horizontal default vertical

布局