G6Lite 图表示例

图表示例

按能力浏览可直接运行的图可视化示例。查看真实效果、源码与数据，快速理解每个公开 API 的使用方式。

51官网示例
8能力分类
01

快速开始

从最小 Graph 配置开始，理解数据、布局和画布交互。

2
最简关系图最简关系图查看示例使用最少配置渲染一个可缩放、可拖拽的关系图。默认主题与交互状态默认主题与交互状态查看示例并排检查 light、dark 预设主题，以及节点和边的默认状态表现。
02

数据与状态

覆盖数据增删改、元素查询、邻接关系、状态与可见性。

4
节点与边增删改节点与边增删改查看示例集中演示节点和边的单个、批量新增、更新和删除。查询、批量状态与可见性查询、批量状态与可见性查看示例验证元素、邻接、状态查询，以及批量状态和可见性控制。全量替换数据全量替换数据查看示例用 setData 替换整图数据，并在替换后切换布局。搜索并聚焦搜索并聚焦查看示例按名称搜索节点，高亮匹配项并把视口移过去。
03

元素

配置节点、边、标签、箭头、平行边与 Combo 分组。

14
节点数据映射样式节点数据映射样式查看示例按业务字段动态设置节点颜色、尺寸和高亮交互。图形类型图形类型查看示例并排查看圆形和矩形节点。节点边框与圆角节点边框与圆角查看示例调整描边、线宽和矩形圆角。边与箭头方向边与箭头方向查看示例比较无箭头、单向、双向和粗边箭头。边类型边类型查看示例展示直线、虚线、弧线和曲线。边颜色边颜色查看示例按业务分类给边映射颜色。边状态与权重边状态与权重查看示例用权重映射边宽，并查看边的状态样式。细边交互热区细边交互热区查看示例保持细线外观，同时扩大直线、曲线和自环的拾取范围。平行边与反向边平行边与反向边查看示例自动错开同源同目标的多条边、反向边和单边。自环边自环边查看示例展示一个节点上的单条和多层嵌套自环。标签位置与图标标签位置与图标查看示例展示节点标签、边标签、图标，并在运行时切换位置。标签渲染策略标签渲染策略查看示例对比固定字号、低缩放持续绘制和关闭碰撞隐藏。折线与正交路由折线与正交路由查看示例用圆角正交折线连接从左到右的流程节点。Combo 分组容器Combo 分组容器查看示例展示嵌套分组、折叠展开、运行时归组和数据导出。
04

布局

比较常用布局，并在运行时切换不同的图结构表达。

9
常用布局切换常用布局切换查看示例在同一份数据上切换 circular、force、grid 和 dagre。更多内置布局更多内置布局查看示例比较 radial、concentric、ForceAtlas2、fruchterman、MDS 和 random。流程图流程图查看示例用层级布局和折线边绘制决策流程。缩进树缩进树查看示例用缩进布局展示目录结构。Worker 布局Worker 布局查看示例把力导向计算放到 Web Worker，避免挡住主线程。辐射树辐射树查看示例用辐射布局把一棵主题树铺在中心节点周围。调用链调用链查看示例用从左到右的层级布局展示服务之间的调用关系。思维导图思维导图查看示例围绕中心主题展开双向分支，用颜色和文字表达知识层级。鱼骨图鱼骨图查看示例将问题、分类与原因组织成鱼骨结构，清晰呈现归因层级。
05

交互

组合提示、点选、框选、拉索选择和高亮行为。

8
Tooltip 浮层Tooltip 浮层查看示例悬停节点或边时展示自定义业务信息。悬停高亮悬停高亮查看示例悬停节点或边时高亮关联元素，并淡化其余元素。一度邻居高亮一度邻居高亮查看示例悬停节点高亮邻居和连边，悬停边高亮两端节点。点选、框选与拉索选择点选、框选与拉索选择查看示例在同一示例中比较 click、brush 和 lasso 选择行为。拖拽节点与 Combo拖拽节点与 Combo查看示例拖拽单个节点，或拖拽 Combo 背景带动其中的节点。拖拽边端点拖拽边端点查看示例把边的端点拖到另一个节点上，完成重新连线。事件面板事件面板查看示例点击、拖拽和选择节点时，查看 Graph 发出的公开事件。右键菜单右键菜单查看示例在节点上打开右键菜单，执行聚焦或高亮。
06

视口

控制缩放、聚焦、适配、画布尺寸与坐标转换。

2
视口与坐标转换视口与坐标转换查看示例验证 camera、fit、zoom、focus、resize 和屏幕/图坐标互转。缩放范围与灵敏度缩放范围与灵敏度查看示例把滚轮缩放限制在指定灵敏度和最小、最大比例之间。
07

扩展

通过公开注册与扩展 API 定制节点、边、布局、行为和插件。

7
扩展系统综合示例扩展系统综合示例查看示例组合验证 decoration、edge、layout、transform、behavior 和 plugin 扩展。呼吸节点呼吸节点查看示例用自定义节点动画表现选中和高亮状态。自定义标签渲染自定义标签渲染查看示例节点和边共用一个自定义 Label Renderer。自定义节点与显式边 ID自定义节点与显式边 ID查看示例注册自定义节点，并使用显式边 ID 与 Combo 状态。注册自定义 Behavior注册自定义 Behavior查看示例注册一个 Behavior：点击节点时选中它，点击画布时清除。自定义布局自定义布局查看示例注册一个把节点排成两行的布局扩展。节点徽章节点徽章查看示例在节点边界堆叠计数、状态和文本徽章。
08

场景与性能

使用真实数据和大规模关系网络验证渲染与交互能力。

5
人物关系网络人物关系网络查看示例通过人物节点和关系标签，展示力导布局下的关联网络。组织架构图组织架构图查看示例使用层级布局、矩形节点和树形连线，展示组织与团队的上下级关系。AI Papers 大规模关系图AI Papers 大规模关系图查看示例使用真实论文引用网络验证大图渲染和交互链路。200 节点200 节点查看示例用 200 个节点快速查看中等规模图的渲染和交互。5000 节点与标签5000 节点与标签查看示例在 5000 个节点上绘制 Canvas 标签。