双向柱状图

凡拓数创数字孪生 2025年5月30日 10:41

收藏文档

双向柱状图是柱状图的一种，实现双向展示正负柱状样式，支持多系列数据配置以及双向式的数据展示。
效果案例：

![](/media/202505/2025-05-30_103126_2162130.21056095117938312.png)
## 样式
在样式中可以设置组件的基本属性、全局、坐标轴和系列。
### ①基本属性
位置尺寸：
位置包括组件的横坐标和纵坐标，单位为px；横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。尺寸包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。
### ②全局
边距：
基本柱状图表距离整个组件上、下的边距。
柱状样式

![](/media/202505/2025-05-30_103210_6819380.18349825026178967.png)
图例

![](/media/202505/2025-05-30_103855_0914140.7705423669907028.png)
轮播动画：
开启后图表数据进行轮播，可设置滚动时长和动画间隔。

![](/media/202505/2025-05-30_103912_2320850.11275551991323796.png)
### ③坐标轴
坐标轴分为X轴、Y轴和Y轴配置。
启动：
启用可以选择是否开启某坐标轴，取消勾选后则取消该坐标轴和对应的配置。
X轴：
支持对柱状图的x轴显隐、样式编辑。

| 配置项 | 说明                         |
|-----|----------------------------|
| 轴标签 | X轴的轴标签，可调整格式、文本样式、展示方式和偏移量 |
| 轴单位 | X轴轴标签的单位，可调整单位内容、偏移量和文字样式  |
| 轴线  | X轴的轴线颜色和粗细                 |
| 刻度  | X轴的刻度线的颜色、粗细、长度            |
| 网格线 | X轴的网格线样式                   |

Y轴：
支持对柱状图的y轴显隐、样式编辑。

| 配置项 | 说明                         |
|-----|----------------------------|
| 轴标签 | Y轴的轴标签，可调整格式、文本样式、展示方式和偏移量 |
| 轴单位 | Y轴轴标签的单位，可调整单位内容、偏移量和文字样式  |
| 轴线  | Y轴的轴线颜色和粗细                 |
| 刻度  | Y轴的刻度线的颜色、粗细、长度            |
| 网格线 | Y轴的网格线样式                   |

z轴：
支持对柱状图的z轴显隐、样式编辑。

| 配置项 | 说明                         |
|-----|----------------------------|
| 轴标签 | Z轴的轴标签，可调整格式、文本样式、展示方式和偏移量 |
| 轴线  | Z轴的轴线颜色和粗细                 |
| 刻度  | Z轴的刻度线的颜色、粗细、长度            |
| 网格线 | Z轴的网格线样式                   |
### ④系列
对数据有类型区分展示需求时，可以将数据划分成不同系列。

| 配置项  | 说明                          |
|------|-----------------------------|
| 映射   | 字段名和显示名之间的映射。               |
| 颜色   | 颜色 改变指定系列的颜色和纹理             |
| 极值高亮 | 对基本柱状图中的同一系列的数据中的最大值(最小值)高亮 |
| 整体布局 | 左右边距                        |
| 数值标签 | 文本样式                        |
## 数据

| 字段         | 说明       |
|------------|----------|
| seriesName | 系列       |
| name       | 类别       |
| value      | 单个数据项的数值 |

![](/media/202505/2025-05-30_104150_8411850.30907396805431553.png)