基本柱状图

凡拓数创数字孪生 2025年5月23日 21:14

收藏文档

基本柱状图通过垂直柱子高度变化展示多维的数据差异，支持自定义y轴区间和多个系列的数据配置，常用于展示数据分布或趋势变化。
效果案例：

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

![](/media/202505/2025-05-23_210848_8062860.746867983457598.png)
**数值标签：**

![](/media/202505/2025-05-23_210909_4717660.2453984752445334.png)
**图例：**

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

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

| 配置项 | 说明                         |
|-----|----------------------------|
| 轴标签 | X轴的轴标签，可调整格式、文本样式、展示方式和偏移量 |
| 轴线  | X轴的轴线颜色和粗细                 |
| 刻度  | X轴的刻度线的颜色、粗细、长度            |
| 网格线 | X轴的网格线样式                   |
Y轴：支持对柱状图的y轴显隐、样式编辑。

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

| 配置项  | 说明                          |
|------|-----------------------------|
| 映射   | 字段名和显示名之间的映射。               |
| 颜色   | 颜色 改变指定系列的颜色和纹理             |
| 极值高亮 | 对基本柱状图中的同一系列的数据中的最大值(最小值)高亮 |
### ⑤提示框
| 字段         | 说明       |
|------------|----------|
| seriesName | 系列       |
| name       | 类别       |
| value      | 单个数据项的数值 |
自动轮播：
启用后提示框进行自动轮播，可设置停留时间。
悬停触发：
鼠标悬浮到对应系列上时，显示提示框。
提示框：

| 配置项   | 说明                             |
|-------|--------------------------------|
| 提示框样式 | 柱状图的提示框，支持调整提示框的背景、尺寸、边距和偏移量   |
| 框内数据  | 提示框内的数据，支持修改X轴标签、数据名称、数据值的文字样式 |
## 数据

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

![](/media/202505/2025-05-23_211322_5237330.7586397547873164.png)