柱状图-元件区-有人云

**柱状图元件支持自定义y轴区间和多个系列的数据配置，能够更加智能地展示多维的数据差异。柱状图可将多个数据的条形彼此叠加显示，适合用来显示大类别如何细分为较小的类别，以及每部分与总量之间的关系。**

### **属性：**
**重命名：**点击元件名称右上角![](/Public/attached/20220221033259_17742.png)，输入元件名称，点击确定保存。为元件定义一个名称为了在元件交互式更快的定位到元件。
**图表尺寸：**包括元件的宽度和高度，单位为px。
**图表位置：**包括组件的横坐标和纵坐标，单位为px。横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。
**旋转角度：**以元件的中心为中心点，进行旋转，单位为度（°）。
**透明度：**取值范围为[0,1]。为0时，图表隐藏；为1时，图表全部显示。默认为1。
![](/Public/attached/20220221033318_31071.png)
### **基础配置：**
#### 结构配置
![](/Public/attached/20220221033416_65729.png)
####柱状图类型：包括纵向与横向
##### 纵向的效果如图
![](/Public/attached/20220221033537_18172.png)
##### 横向的效果如图
![](/Public/attached/20220222094254_76072.png)
#### 绘图边距：柱图区域与元件上下左右边界之间的距离。
顶部：柱子最上端与元件上边界之间的距离。
底部：柱子最下端与元件下边界之间的距离。
左侧：最左边的柱子与元件左边界之间的距离。
右侧：最右边的柱子与元件右边界之间的距离。
![](/Public/attached/20220221033708_39305.png)
####悬浮框提示：在预览或发布页面，鼠标悬浮或单击柱图时出现的提示框的开关。
![](/Public/attached/20220221033830_25698.png)
#### 图例配置
![](/Public/attached/20220221033844_89660.png)
图例是什么，图例是元件右上角系列样式
文本颜色：文本的颜色
布局：包括位置与对齐方式，
- 位置：图例展示的位置
左侧：元件上方左侧展示
右侧：元件上方右侧展示
居中：元件上方居中展示
- 对齐方式：系列名称与色块展示主次

![](/Public/attached/20220221033854_77925.png)
#### 坐标轴配置：组件坐标轴包括x轴和y轴两种。
##### X轴配置
![](/Public/attached/20220221034552_53363.png)
**显示状态：**打开开关，元件内x轴内容显示可见；关闭开关，元件内x轴内容不可见。
**坐标轴标记：**刻度线的显示与关闭，可单击图标![](/Public/attached/20220221034616_61119.png)控制坐标标记的显隐。
**绑定值：** X轴所绑定的字段值。当下方类型配置为时间轴时，需要选择时间类型字段。
**X轴类型：**x轴标签数据的类型，可选：
- 数值型：支持整数、浮点数等数值类型的数据。
- 类目型：支持字符、字符串等类目类型的数据。
- 时间型：时间类型的数据，需要配置数据格式。与绑定值配置的字段需匹配
**轴线配置：**包括线型、粗细和颜色
- 线型：支持实线、虚线、点线
- 粗细：支持设置轴线的粗细
- 颜色：支持设置轴线的颜色
**网格线：**x轴网格线的样式，可单击图标![](/Public/attached/20220221034616_61119.png)控制x轴网格线的显隐。
**网格线配置：**包括线型、粗细和颜色
- 线型：支持实线、虚线、点线
- 粗细：支持设置网格线的粗细
- 颜色：支持设置网格线的颜色
- 倾斜角度：X轴标记的倾斜角度

##### Y轴配置
![](/Public/attached/20220221034939_43212.png)
**显示状态：**打开开关，元件内y轴内容显示可见；关闭开关，元件内y轴内容不可见。
**单位：**体现Y轴数值的单位，效果如下图：
![](/Public/attached/20220221034811_19483.png)
**轴线配置：**包括线型、粗细和颜色
- 线型：支持实线、虚线、点线
- 粗细：支持设置轴线的粗细
- 颜色：支持设置轴线的颜色
**网格线：**Y轴网格线的样式，可单击图标![](/Public/attached/20220221034616_61119.png)控制Y轴网格线的显隐。
**网格线配置：**包括线型、粗细和颜色
- 线型：支持实线、虚线、点线
- 粗细：支持设置网格线的粗细
- 颜色：支持设置网格线的颜色

##### 系列配置
![](/Public/attached/20220221035039_56877.png)
体现多个数据点在同一维度的占比，适用展示每部分与总量之间的关系。
![](/Public/attached/20220221035148_63018.png)
**添加数据系列：**单击右侧的加号图标![](/Public/attached/20220221035256_39613.png)，添加数据系列。
**删除数据系列:**点击系列名称右侧的删除图标![](/Public/attached/20220221035304_16202.png)，删除数据系列。
**柱形颜色**：该系列下柱子的颜色。
**系列名称：**数据系列的系列显示名称，可自定义。
**系列标识：**对应系列的数据，比如：设备的温度、湿度
**绑定值：**数据字段，指柱形对应的值，比如：温度这个数据点此处展示的字段是温度值或时间等。
**柱形宽度：**柱体的粗细。
**柱形圆角：**柱形四个角的圆角，可配置成为胶囊柱形样式。
**显示柱形标签：**可单击图标![](/Public/attached/20220221035319_68634.png)控制标签的显隐
![](/Public/attached/20220221035352_26798.png)
**标签离柱距离：**标签离柱形底部的距离
**数据堆叠：**可单击图标![](/Public/attached/20220221035417_23903.png)控制多个柱形堆叠展示还是分体展示
![](/Public/attached/20220221035432_64253.png)