一、定义与核心用途
-
Scatter（散点图）
- 定义：通过笛卡尔坐标系中的离散点，展示两个或多个变量之间的关系。每个点的位置由横纵坐标决定，支持通过颜色、大小或形状映射额外维度数据（如气泡图）。
- 核心用途：
- 分析变量间的相关性（如正/负相关）。
- 观察数据分布规律（如聚类、离散程度、异常值检测）。
- 辅助模型拟合（如回归分析）和趋势预测。
- 适用于多坐标系（直角坐标系、极坐标系、日历坐标系等）。
-
Graph（关系图）
- 定义：由 节点（Node） 和 边（Edge） 构成的网络结构图，节点表示实体，边表示实体间的连接关系。在笛卡尔坐标系中，节点可明确指定坐标以展示空间分布。
- 核心用途：
- 可视化复杂网络拓扑（如社交网络、知识图谱、流程图）。
- 同时表达节点属性（通过坐标、颜色、大小）与关系强度（通过边的粗细、颜色）。
- 分析节点间的连通性、中心性（如关键节点识别）。
二、数据结构差异
| 维度 | Scatter（散点图） | Graph（关系图） |
|---|---|---|
| 数据单元 | 独立的数据点（每个点包含x、y值，可扩展至z、颜色、大小等属性） | 节点（包含坐标、属性）和边（包含源节点、目标节点、权重等） |
| 数据格式 | 二维或三维数组（如[[x1,y1], [x2,y2], ...]），可映射到坐标系 | 需定义nodes数组和links数组，例如： {nodes: [{name: 'A', x: 10, y: 20}, ...], links: [{source: 'A', target: 'B'}, ...]} |
| 扩展性 | 支持通过符号大小、颜色、形状表达第三或第四维度 | 支持通过节点大小、颜色、标签展示属性，通过边的样式（如虚线、箭头）表达关系类型 |
三、可视化效果对比
| 特征 | Scatter（散点图） | Graph（关系图） |
|---|---|---|
| 基础元素 | 离散的点，无连接线，重点呈现点的分布 | 节点（圆形、方形等图标）与边（直线、曲线），形成网络结构 |
| 动态效果 | 支持涟漪动画（如effectScatter类型）突出高亮数据 | 支持拖拽节点、缩放布局、力导向动画（模拟物理力使网络自动调整布局） |
| 交互功能 | 数据点悬停提示、区域缩放（dataZoom）、视觉映射（visualMap） | 节点点击展开/折叠子图、边悬停高亮路径、布局算法切换（如力引导、环形布局） |
| 大数据优化 | 支持大规模散点渲染（专利技术处理百万级数据） | 节点数量过多时需优化（如分块加载、简化边显示） |
四、适用场景与典型案例
-
Scatter（散点图）
- 典型场景：
-
分析身高与体重相关性。
-
检测销售数据中的异常订单（如单价与数量偏离常规分布）。
-
展示城市空气质量（通过气泡大小表示PM2.5浓度）。
- 优势：直观展示变量关系，适合发现数据模式。
- 劣势：多序列叠加时易混乱，不擅长表达层次结构。
-
Graph（关系图）
- 典型场景：
-
社交网络中的用户关系图谱。
-
企业组织结构或供应链上下游关系。
-
交通路线图（节点为站点，边为线路）。
- 优势：清晰呈现复杂关系网络，支持动态探索。
- 劣势：节点过多时易拥挤，需依赖交互功能简化视图。
五、配置项与扩展功能
-
Scatter（散点图）关键配置：
symbolSize：控制点的大小（可基于数据动态调整）。itemStyle.color：设置颜色或绑定数据映射。visualMap：通过视觉通道映射额外维度（如颜色渐变表示温度）。
-
Graph（关系图）关键配置：
layout：选择布局算法（如force力导向、circular环形）。edgeSymbol：定义边两端的符号（如箭头）。roam：启用拖拽平移和缩放。
六、总结
| 对比维度 | Scatter（散点图） | Graph（关系图） |
|---|---|---|
| 核心目标 | 变量关系与数据分布 | 网络结构与节点关系 |
| 数据重点 | 独立点的属性（坐标、大小、颜色） | 节点间的连接与拓扑结构 |
| 最佳适用场景 | 统计分析、异常检测、多维数据探索 | 社交网络、知识图谱、流程可视化 |
| 复杂度 | 低（适合基础分析） | 高（需处理节点与边的动态交互） |
选择建议：
- 若需探索变量间关联或分布规律，优先选择散点图。
- 若需揭示实体间复杂关系或网络结构，则使用Graph图。
- 二者可结合使用（如在Graph中嵌入散点图展示节点属性分布）。
