散点图

凡拓数创数字孪生 2025年5月30日 14:33

收藏文档

散点图通常用于表述两个连续变量之间的关系，主要的构成元素有：数据源（散点）、横纵坐标轴、变量名及研究的对象。而基本要素就是散点，即所统计的数据，展示实时数据的散点变化趋势。
效果案例：

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

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

![](/media/202505/2025-05-30_142914_6650280.406809271290384.png)
### ③坐标轴
坐标轴分为X轴、Y轴配置。
启动：
启用可以选择是否开启某坐标轴，取消勾选后则取消该坐标轴和对应的配置。
X轴：
支持对柱状图的x轴显隐、样式编辑。
| 配置项 | 说明                         |
|-----|----------------------------|
| 轴标签 | X轴的轴标签，可调整格式、文本样式、展示方式和偏移量 |
| 轴线  | X轴的轴线颜色和粗细                 |
| 刻度  | X轴的刻度线的颜色、粗细、长度            |
| 网格线 | X轴的网格线样式                   |

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

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

### ④系列
对数据有类型区分展示需求时，可以将数据划分成不同系列。
| 配置项 | 说明               |
|-----|------------------|
| 映射  | 字段名和显示名之间的映射。    |
| 半径  | 改变指定系列的散点半径      |
| 填充  | 填充 改变指定系列的散点颜色   |
| 边框  | 改变指定系列的散点边框颜色、粗细 |
## ⑤提示框
悬停触发：
鼠标悬浮到对应系列上时，显示提示框。
提示框：

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

![](/media/202505/2025-05-30_143218_7697580.7730511364403104.png)