G6关系图快速制作

1.创建容器（一般为div标签）

        

2.数据准备

        const data={

                // 点集nodes:[{id:'node1',// String，该节点存在则必须，节点的唯一标识x:100,// Number，可选，节点位置的 x 值y:200,// Number，可选，节点位置的 y 值},{id:'node2',// String，该节点存在则必须，节点的唯一标识x:300,// Number，可选，节点位置的 x 值y:200,// Number，可选，节点位置的 y 值},],// 边集edges:[{source:'node1',// String，必须，起始点 idtarget:'node2',// String，必须，目标点 id},],};

3.创建关系图

const graph=new G6.Graph({container:'mountNode',// String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身width:800,// Number，必须，图的宽度height:500,// Number，必须，图的高度});

4.配置数据源，渲染

graph.data(data);// 读取 Step 2 中的数据源到图上

graph.render();// 渲染图

    

    

        

        

    

    

    /* 图的画布容器 */

         

/* 引入 G6 */