配置项

定义容器

• container: 指定图表渲染的DOM容器，通常是一个HTML元素的引用

• width: 图表的宽度

• height: 图表的高度

defaultNode节点样式

节点形状、大小、样式

• type: 节点的形状类型。可选值包括：
• circle: 圆形节点。
• ellipse: 椭圆形节点。
• rect: 矩形节点。
• diamond: 菱形节点。
• triangle: 三角形节点。
• star: 星形节点。
• image: 图像节点，可以指定图片URL。
• text: 文本节点。

• size: 节点的大小，可以是一个数字或者一个数组表示宽高。

• style: 定义节点的样式。
• fill: 填充色。
• stroke: 边框色。
• lineWidth: 设置边或形状的线宽。
• strokeOpacity: 设置边或形状的边框透明度。
• fillOpacity: 设置形状的填充透明度。
• shadowColor: 设置形状的阴影颜色。
• shadowBlur: 设置形状的阴影模糊度。
• shadowOffsetX: 设置形状阴影在X轴方向的偏移。
• shadowOffsetY: 设置形状阴影在Y轴方向的偏移。
• cursor: 设置鼠标悬停时的光标样式，如 pointer 表示光标变为手形。

labelCfg 节点标签样式

• position: 标签的位置。可选值包括center, top, bottom, left, right等。

• style: 定义标签的样式，同上。

defaultEdge 配置定义边线样式

• style: 定义边的样式，同上。

• autoRotate: 设置为true时，边上的标签会随边自动旋转。

• endArrow: 定义边的箭头样式。path属性使用G6内置的箭头函数来创建箭头形状，fill属性设置箭头颜色。

modes 配置图表交互模式

• default: 默认模式，通常包括基本的交互行为，如：
• drag-canvas: 拖动画布。
• zoom-canvas: 缩放画布。
• drag-node: 拖动节点。
• click-select: 点击选中节点或边。

• edit: 编辑模式，可能包括用于编辑图表的交互行为，如：
• click-add-node: 点击添加节点。
• click-add-edge: 点击添加边。
• drag-node: 拖动节点来编辑位置。

• add-node: 添加节点模式，专注于添加新节点的交互。

• add-edge: 添加边模式，专注于添加新边的交互。

layout 配置图表自动布局方式

• random: 随机布局，节点位置随机分布。

• force: 力导向布局，模拟物理粒子的吸引力和斥力，适用于描述对象间的关系。
• preventOverlap: 防止节点重叠。
• nodeSize: 节点大小，用于碰撞检测。
• linkDistance: 边的长度，用于控制节点间距。

• circular: 圆形布局，节点均匀分布在一个圆上。

• radial: 放射布局，节点围绕一个中心节点放射性分布。

• dagre: 分层布局，适用于有向图，节点按层次排列。
• rankdir: 排列方向，TB（从上到下）、BT（从下到上）、LR（从左到右）、RL（从右到左）。
• align: 节点对齐方式，UL（上左）、UR（上右）、DL（下左）、DR（下右）。
• nodesep: 同一层级节点间的水平间距。
• ranksep: 不同层级节点间的垂直间距。
• nodesepFunc: 函数，返回同一层级节点之间的水平间距。
• ranksepFunc: 函数，返回不同层级节点之间的垂直间距。

• grid: 网格布局，节点分布在网格上。

基础示例