基本折线图

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

收藏文档

基本折线图是折线图的一种，通过多系列数据配置的方式，展示同一类目下不同数据的变化，智能地展示多维的数据变化趋势。
效果案例

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

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

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

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

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

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

### ④系列
对数据有类型区分展示需求时，可以将数据划分成不同系列。

| 配置项  | 说明                                      |
|------|-----------------------------------------|
| 映射   | 字段名和显示名之间的映射。                           |
| 折线   | 改变指定系列的折线样式，样式内容包括折线类型、颜色、粗细、曲线、null值连接 |
| 数据标记 | 数据标记 改变指定系列的数据标记模式，单圆/双圆标记样式            |
| 数值标签 | 默认未开启。开启下改变文本样式、偏移                      |
### ⑤提示框
自动轮播：
启用后提示框进行自动轮播，可设置停留时间。
悬停触发：
鼠标悬浮到对应系列上时，显示提示框。
提示框：

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

## 数据

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

![](/media/202505/2025-05-30_104529_2155730.1153909003799366.png)