第一、存在问题：
源版官方方式：
1、数据一大，全盘密密麻麻，无从定位问题所在。
2、思路不清晰，结构不明了。
3、容易出现重复问题却找不到问题点。
第二、设计目标：
第三、结构方法说明
新建一个G6class类，统一返回自己，达到任意地方，调用所有方法，有序控制进程。
以下是每个方法说明：
init: 初始化配置信息，把G6配置的基本信息都传入此方法中。
Graph: 运行G6核心图形构建方法， 运行此方法，必须先运行init方法传入配置信息，此处已做好了，报错提示。确保正确运行。
addData: 载入节点及边的数据，提供给G6预载内容。
render: 调用此方法之后，G6 引擎会根据加载的数据进行图的绘制页面渲染。
运行G6类，前提条件
init(xxx).Graph(xxx).addData(xxx).render()
此四个方法，为必定方法，缺一报错，均有错误提示处理方案。其余方法为非必要条件，可选择性增减。
addNode: 注册自定义节点方法，此方法可以多次使用，原则上一个方法，一个节点图形，多个则乱，但同一结构且代码量小时，也可多条并行，但是不建议。
举例：
const threeNode = (G6class) => {
G6class.G6.registerNode(
"three-node",
{
draw(cfg, group) {
...
// To do something
}
})
}
addEdge: 当内置的边不能满足需求时，可以通过，注册自定义边的信息，此方法也可多次使用。
举例：
const threeEdge = (G6class) => {
G6class.G6.registerEdge("three-edge", {
draw(cfg, group) {
const { startPoint, endPoint, style } = cfg;
const shape = group.addShape("path", {
attrs: {
stroke: "#67C1FF",
path: [
["M", startPoint.x, startPoint.y],
["L", startPoint.x, endPoint.y],
["L", endPoint.x, endPoint.y],
],
},
});
return shape;
},
});
};
addLayout: 增加自定义层方法。此方法非常灵活，可放在render后，直接做为渲染后处理动作， 作为插件入口均可使用，按需接入。 但每个方法原则上要求只做一件事，多功能可多次复用此方法来实现。 也可作为运行渲染后，附加功能事件动作等等。
on: 注册G6事件。此方法必须前提是放在render之后，因为没有渲染怎能谈事件？
举例：
const onSecondNode = (G6class) => {
G6class.G6graph.on("node:click", async (evt) => {
......
// To do something
})
}
setDom: 自动设置画布大小尺寸。
