参见g6图表库

helloworld//1.准备数据//node(node)letnodes=[{id:1,//节点idx:0,//节点x坐标y:0//节点ycoordinate},{id:2,x:100,y:0}]//edge（边缘）letedges=[{source:'2',//节点id，从哪里开始target:'1'//节点id,wheretoend}]//2.初始化对象letg6=newG6.Graph({container:'container',//containeridfitView:'cc',//渲染位置，cc表示渲染到graph中间位置(centercenter)height:window.innerHeight//Canvasheight})//3.渲染数据g6.read({edges,nodes})这是渲染出来的效果。Demo源码，官方文档。可以看到默认节点是一个蓝色圆圈。如果你想改变节点的外观，你需要使用自定义节点。//1.准备数据//node(node)letnodes=[{id:1,//节点idx:0,//节点x坐标y:0,//节点y坐标name:'张三'//自定义数据},{id:2,x:100,y:0,name:'Lisi'//自定义数据}]//edge(edge)letedges=[{source:'2',//nodeid,wheretostarttarget:'1'//nodeid,wheretoend}]//2.初始化对象letg6=newG6.Graph({container:'container',//containeridrenderer:'svg',fitView:'cc',//渲染位置，cc表示渲染到图表的中间位置（centercenter）height:window.innerHeight//canvasheight})//3.注册节点G6.registerNode('rect',{draw(item){constgroup=item.getGraphicGroup()constmodel=item.getModel()letsize=50letcenter=size/2//绘制文本节点letrect=group.addShape('rect',{attrs:{x:0,y:0,width:size,height:size,fill:'#6cf'}})//画圆shapeletcircle=group.addShape('circle',{attrs:{x:center,y:center,r:center,fill:'#ddd',stroke:'#f06'}})//绘制文本节点lettext=group.addShape('text',{attrs:{x:0,y:0,fontSize:20,fill:'#000',stroke:'orange',text:`id:${model.id}`}})//绘制dom元素letdom=group.addShape('dom',{attrs:{x:0,y:0,width:size,height:size,html:`

`}})returngroup}})//4.使用节点g6.node({shape:'rect'})//5.渲染数据g6.read({edges,nodes})下图是渲染效果Demo的源码，官方文档。自定义节点时，出现如下现象：添加形状有先后顺序，后面的会覆盖前面的。比如dom的z-index添加一个文本节点时，其他的shape会避开。相同的坐标设置为[0,0]，文本将呈现在顶部。链接线将基于返回元素。如果返回文本，该行将连接到文本节点；如果返回组，它将在整体的中间。可以从模型中检索定义节点时的其他数据，例如示例中的名称。指定绘制元素的尺寸后，会裁掉多余的部分，比如例子中的dom。绘制dom元素时，需要在初始化对象时指定newG6.Graph({renderer:'svg'})。自定义边自定义边的用法类似于自定义节点。//1.准备数据//node(node)letnodes=[{id:1,x:0,y:0},{id:2,x:100,y:0},{id:3,x:100,y:50}]//edge（边）letedges=[{source:1,//节点id，从哪里开始target:2//节点id，从哪里结束},{source:1,//nodeid,wheretostarttarget:3//nodeid,wheretoend}]//2.初始化对象letg6=newG6.Graph({container:'container',//containeridfitView:'cc',//渲染位置，cc表示渲染到图表的中间位置（centercenter）height:window.innerHeight//canvasheight})//3.自定义边G6.registerEdge('line',{//pathgetPath（项目）{constpoints=item.getPoints()conststart=points[0]constend=points[points.length-1]return[['M',start.x,start.y],['L',end.x,end.y]]},//开始（圆形）箭头startArrow:{path(){constr=5constx=-5consty=0return[['M',x,y-r],['a',r,r,0,1,1,0,2*r],['a',r,r,0,1,1,0,-2*r],['z']]},缩短(){return10},style(item){constkeyShape=item.getKeyShape()const{strokeOpacity,stroke}=keyShape.attr()return{fillOpacity:strokeOpacity,fill:'#fff',stroke}}}})//4.使用边缘g6.edge({shape:'line',startArrow:true,//添加头部箭头color:'red',endArrow:true//添加尾部箭头})//5.渲染数据g6.read({edges,nodes})这是渲染效果Demo源码，官方文档。自定义节点边时，出现如下现象：内置边为灰色透明线。设置{endArrow:true}后，会在终点添加一个箭头。颜色可以直接设置为颜色，也可以用相同的样式绘制。添加事件//1.准备数据//node(node)letnodes=[{id:1,x:0,y:0},{id:2,x:100,y:0},{id:3,x:100,y:50}]//edge（边）letedges=[{source:1,//节点id，从哪里开始target:2//节点id，从哪里结束},{source:1,//节点id，从哪里开始target:3//节点id，从哪里结束}]//2.初始化对象letg6=newG6.Graph({container:'container',//容器idfitView:'cc',//渲染位置，cc表示渲染到图表的中间位置（centercenter）height:window.innerHeight//canvasheight})//3.添加事件监听器g6.on('node:click',(e)=>{const{item}=econst{id,x,y}=item.getModel()alert(`id:${id},x:${x},y:${y}`)})//4.渲染数据g6.read({edges,nodes})事件监听合并，合并方式为[object]:[event],'node','edge','group','guide'，可以自由组合，比如node:click,edge:dbclick。Demo源码，官方文档。