antv g6对接后台数据_antv/g6-editor的使用详解

你好！ 这是一篇讲解怎么使用g6-editor实现一个流程调度功能的文章。如果你想学习如何使用g6-editor, 可以仔细阅读这篇文章，了解一下g6-editor的基本用法知识。网上关于这方面的资料还算多，但是能比较详细讲解的是少之又少，顺手记录我在项目中的运用，希望对有这方面需求的同学有所帮助。

安装并在代码中引入

npm install @antv/g6-editor

import G6Editor from [email protected]/g6-editor';

this.editor = new G6Editor();

添加组件

// 缩略图

const minimap = new G6Editor.Minimap({

container: 'minimap'

});

// 工具栏

const toolbar = new G6Editor.Toolbar({

container: 'toolbar'

});

// 菜单

const contextmenu = new G6Editor.Contextmenu({

container: 'contextmenu'

});

// 画布

const itempannel = new G6Editor.Itempannel({

container: 'itempannel'

});

// 详情信息

const detailpannel = new G6Editor.Detailpannel({

container: 'detailpannel'

});

// 添加组件

this.editor.add(toolbar);

this.editor.add(minimap);

this.editor.add(contextmenu);

this.editor.add(itempannel);

this.editor.add(detailpannel);

container指向的是挂载组件的id。

获取当前页

// 获取最基础图类

const CPage = this.editor.getCurrentPage();

比如想获取图中的数据：node/group/edge，可用如下方式：

const nodes = CPage.getNodes() || [];

const edges = CPage.getEdges() || [];

const groups = CPage.getGroups() || [];

监听事件，如鼠标选择图形