本文档描述了 Apache ECharts 中图和树图的功能，重点介绍它们的架构、配置选项和使用模式。这些图表类型专门用于可视化数据点之间的关系、网络结构和分层数据。有关桑基图等其他基于关系的可视化信息，请参阅桑基图和流程图。
ECharts 中的图和树图旨在可视化连接的数据结构，其中实体之间的关系与实体本身同样重要。
来源：test/graph-simple.html43-159 test/graph-circular.html61-179
ECharts 中的图表为网络可视化提供了灵活的框架。它实现了各种布局算法，并支持节点和边的广泛自定义。
来源：test/graph-simple.html43-159 test/graph-circular.html61-179
ECharts 中的图系列通过在系列定义中设置 type: 'graph' 来配置。一个简单的图需要节点（数据）和它们之间的链接。
ECharts 支持三种主要的图表布局类型
| 布局类型 | 描述 | 关键配置选项 |
|---|---|---|
| 无（默认） | 节点手动定位 | 在节点对象中指定 x 和 y 坐标 |
| 圆形 | 节点呈圆形排列 | layout: 'circular', circular: { rotateLabel: true } |
| 力引导布局 | 基于物理的节点排列 | layout: 'force', force: { repulsion: 100 } |
来源：test/graph-simple.html48-50 test/graph-circular.html67-70
图表中的节点和边可以进行广泛的自定义
| 功能 | 描述 | 配置示例 |
|---|---|---|
| 节点大小 | 节点符号的大小 | symbolSize: 20 或基于数据的函数 |
| 节点样式 | 节点的视觉外观 | itemStyle: { opacity: 0.8, color: '#abc' } |
| 边样式 | 连接的外观 | lineStyle: { width: 3, curveness: 0.2 } |
| 边符号 | 边两端的符号 | edgeSymbol: ['circle', 'arrow'] |
| 标签 | 节点/边的文本显示 | label: { show: true, position: 'right' } |
来源：test/graph-simple.html51-99 test/graph-circular.html723-731
图表支持多种交互功能
| 功能 | 描述 | 配置 |
|---|---|---|
| 漫游 | 平移和缩放图表 | roam: true |
| 聚焦节点邻近 | 悬停时高亮显示连接的节点 | focusNodeAdjacency: true |
| 动画 | 动画过渡 | animationDurationUpdate: 1500 |
| 工具提示 | 悬停时显示信息 | tooltip: {} |
来源：test/graph-simple.html46-47 test/graph-circular.html72-722
图表的内部数据结构由两个主要集合组成
来源：test/graph-simple.html75-92 test/graph-simple.html100-156
节点可以使用以下属性进行配置
来源：test/graph-simple.html75-92
边（链接）使用以下属性进行配置
来源：test/graph-simple.html100-156
圆形布局将节点排列成一个圆圈，这对于某些网络可视化非常有用。此布局可以通过以下选项进行配置
来源：test/graph-circular.html66-70 test/graph-circular.html558-561
力引导布局使用物理模拟来排列节点，节点之间存在斥力，沿边存在引力。这创建了外观自然的网络可视化。
树图专门用于分层数据可视化。它们使用父子关系来创建树结构。ECharts 提供了几种类型的树可视化
ECharts 中的树图通过 tree 系列类型进行配置
图和树图与 ECharts 的其他组件配合良好
| 组件 | 集成说明 |
|---|---|
| 工具提示 | 悬停时显示节点/边信息 |
| 图例 | 可用于显示节点类别 |
| 数据区域缩放 | 对图视图缩放的支持有限 |
| 视觉映射 | 可以将节点值编码到视觉通道 |
来源：test/graph-simple.html45 test/graph-circular.html62-204
有关 ECharts 中其他基于关系的可视化，请参阅