---
order: 11
navTitle: 折线图
---
# 仪表板组件-折线图

折线图是将值标注成点，并通过连线将这些点按照某种顺序连接起来形成的图形，用于展示数值所占大小随时间或有序类别而变化的趋势。比如展示不同月份下服装销售数量的变化趋势：

![基本折线图示例](./images/line-chart-zxt.png)

示例地址：[折线图](https://demo.succbi.com/v5/bi/line)

## 使用折线图组件{#start}

折线图的**X轴**上至少取1个维度，如月份、大区等；**Y轴**上至少取1个度量，如销售数量、销售金额等。

**操作步骤：**

![折线图制作](./images/line-chart.gif)

1. 双击或拖入维度【月份】到**X轴**
2. 双击或拖入度量【销售数量】到**Y轴**
3. 在**属性栏**>**样式**>**系列**>**连接线**，勾选**曲线**，则曲线将每个值点连接起来形成折线图
4. 还可以设置**连接线**的线型为**虚线**，用虚线将每个值点连接起来形成折线图

通过上述4个步骤即可快速实现展示销售数量随时间变化的一个趋势，且可以切换连接线状态。

## 属性介绍{#properties}

### 系列{#series}

折线图支持设置连接线、散点的样式，在**样式**>**系列**中进行设置。

![系列](./images/2023-04-27-16-40-00.png)

- **连接线**：可以设置连接线形状、颜色、粗细等，并可设置连接线以曲线平滑连接
- **描边**：可以设置散点形状、颜色、大小等样式，并可对散点进行描边，设置散点边框的形状、颜色、粗细

### 滚动{#scroll}

折线图支持滚动条，可以设置滚动条显示方式、当前页展示数据量、是否循环滚动等，在**组件**>**滚动**中进行设置。折线图与柱形图的滚动属性定义一致，具体属性设置可查看[滚动](./column-chart.md#scroll)。

![滚动](./images/2023-04-27-16-42-00.png)

## 更多效果{#scenarios}

可以自定义折线图的取数和样式来实现不同效果的折线图。

| [多系列折线图](#multiple)   | [堆积折线图](#stack)    |[散点大小折线图](#scatter)    |
| --------    | ----- | ----- |
| ![多系列折线图示例](./images/line-chart-dxl.png) | ![堆积折线图示例](./images/line-chart-dj.png)  |![散点大小折线图示例](./images/line-chart-sddx.png)  |

### 多系列折线图{#multiple}

多系列折线图可以用来同时展示多个指标，比较不同指标之间的走势趋向。

![多系列折线图示例](./images/line-chart-dxlzxt.png)

**实现方式**

将多个度量一一拖入到**Y轴**上，如【零售总金额】、【交易总金额】。

![多系列折线图实现](./images/2020-07-24-17-54-12.png)

### 堆积折线图{#stack}

堆积折线图可以直观展示每个分组的走势趋向，以及反映出该系列的一个波动范围。可以使用堆积折线图展示不同价格档次的销售数量随时间的走向和该时间段内的波动范围，如下图所示：

![堆积折线图示例](./images/2020-07-24-17-58-57.png)

**实现方式**

拖入一个维度【价格档次】到**Y轴**系列值下的[颜色](../../design/data/data-style/color.md)，即可实现按价格档次维度展示各月份的销售数量走势波动。

![堆积折线图实现](./images/2020-07-24-17-55-48.png)

### 散点大小折线图{#scatter}

散点大小折线图使用散点的大小表示指标数据的大小，如下图所示利用散点大小展示不同地区折扣率的大小：

![散点大小折线图示例](./images/line-chart-sdzxt.png)

**实现方式**

将拖入**Y轴**的度量【折扣率】再拖入到到**Y轴**系列值下的[大小](../../design/data/data-style/size.md)，即可实现用图形的大小展示各大区的折扣率的大小。

![散点大小折线图实现](./images/2020-07-24-17-57-25.png)