---
order: 5
navTitle: 象形条形图
---
# 仪表板组件-象形条形图

象形条形图是[条形图](./bar-chart.md)的一种，与条形图的区别在于象形条形图能够自定义柱子形状。

![象形条形图](./images/2021-09-14-10-41-49.png)

示例地址：[象形条形图](https://demo.succbi.com/v5/bi/hpictorialbar)

## 使用象形条形图组件{#start}

象形条形图的制作方法与[条形图](./bar-chart.md)类似。在**X轴**上至少取1个维度，如销售数量等；**Y轴**上至少取1个度量，如大类名称等。

**操作步骤**

![操作步骤](./images/2021_09_14_11_48_55.gif)

- 双击或拖入度量【销售数量】到**X轴**
- 双击或拖入维度【大类名称】到**Y轴**
- 鼠标右键**Y轴**的【大类名称】，选择**指定字段**进行**排序**，点击**添加**，按照【销售数量】>降序进行排序

通过上述3个步骤即可快速实现展示各大类的销售数量，且按销售数量降序显示。

## 属性介绍{#properties}

### 柱间间距{#space}

象形条形图支持自定义柱间距，柱子之间的间距在**样式**>**组件**>**布局**>**柱间间距**中进行设置。单系列与多系列下间距设置不同，具体如下：

- 单系列：设置每个柱子间间距
- 多系列：设置不同系列同一个标签上柱子的间距
  ![间距](./images/2023-04-27-11-33-01.png)

### 形状{#shape}

象形条形图支持自定义柱子形状，以及设置柱子是否由形状层叠构成、间隔多少、高度宽度等，在**样式**>**系列**>**销售数量**>**形状**中进行设置。

![形状](./images/2021-09-15-11-21-27.png)

- **形状设置**：在**形状**>**图标**处可设置柱子的形状
- **宽度**：可以设置像素或者百分比，百分比是单个图形宽度相对于基准柱宽度的比例，如50%表示`宽度=基准柱宽度*50%`
- **高度**：可以设置像素或者百分比，百分比是单个图形高度相对于基准柱宽度的比例，如50%表示`高度=基准柱宽度*50%`
- **层叠设置**：在**形状**>**层叠**处可选择是否层叠，选择`是`用多个相同的形状堆叠表示柱子的长度；选择`否`用一个图形表示柱子长度。系统默认选择`是`，选择层叠时显示间隔属性
  - **间隔**：表示同一柱子中，各图形之间的间距
- **水平偏移**：水平方向上进行左右平移
- **垂直偏移**：垂直方向上进行上下平移

:::tip
象形条形图可以被想象为：它首先是一个条形图，只是条形图的柱子不显示。这些柱子我们称为基准柱。
:::

### 填充{#fill}

通过**填充**可以控制象形条形图柱子的填充方式，在**样式**>**系列**>**销售数量**>**填充**中进行设置。

![填充](./images/2021-09-15-11-20-33.png)

填充：柱子数据部分的背景填充。有以下几个选项：

- 自动：与柱子颜色一致
- 无填充：不设置形状背景
- 颜色填充：自定义背景颜色
- 图片填充：自定义图片进行填充

## 更多效果{#scenarios}

### 多系列象形条形图{#multiple}

多系列象形条形图可以用来同时展示多个指标，比较不同指标之间的数量大小，体验类似条形图，但每个系列都可以单独设置形状等属性。
![多系列](./images/2023-04-24-17-38-01.png)

**实现方式**

将多个度量一一拖入**x轴**上，如【折后总额】、【成本总额】

### 图标背景{#background icon}

象形条形图还可以添加背景的灰色图标，用来更清晰的展示占比情况，可以自定义设置背景图标的形状、颜色等属性。
![背景图标](./images/2023-04-28-14-08-02.png)

**实现方式**

- **添加两个系列**：新建一个值为1的字段，依次拖入该字段和销售数量
- **设置样式**：
  - 形状大小和间距设置成一样的，在**样式**>**系列**>**值为1**>**形状**处，设置合适的形状，调整宽高，层叠设置为是
  - 图标背景设置成灰色，在**样式**>**系列**>**值为1**>**填充**设置
- **设置重叠**：在**样式**>**组件**>**布局**处，把柱间间距调整为-100%。然后将值为1的字段，在**样式**>**系列**>**值为1**>**布局**设置为绘制轴的**x2轴**，与销售数量字段的**x1轴**区分开。

:::tip

1. x轴设置多个度量时，下面的字段会显示在页面的最上层
2. 设置重叠时，如果是显示百分比就不用设置两个轴显示
   :::