【使用antv g6实现拓扑图】

安装antv g6

npm install @antv/g6 --save
import G6 from '@antv/g6';

创建一个 div，并制定必须的属性 id

定义好展示id，通过id获取dom数据

<div id="container" style="width: 100%;height: 800px"></div>

定义初始化方法

init() {const container = document.getElementById('container');//获取拓扑图的宽高const width = container.scrollWidth;const height = container.scrollHeight || 700;this.graph = new G6.Graph({// 使用 contextMenu plugins 时，需要将 container 设置为 position: relative;container: 'container',width,height,fitCenter: true,renderer: 'svg',linkCenter: true,// layout: {//   type: 'dagre',//   rankdir: 'LR', // 可选，默认为图的中心//   align: 'DL', // 可选//   nodesep: 20, // 可选//   ranksep: 50, // 可选//   controlPoints: true, // 可选// },//以中心为原点展示数据layout: {type: 'radial',// center: [ width/2, 400 ],     // 可选，默认为图的中心linkDistance: 400,         // 可选，边长maxIteration: 1000,       // 可选unitRadius: 250,          // 可选preventOverlap: true,     // 可选，必须配合 nodeSizenodeSize: 300,             // 可选strictRadial: true,       // 可选sortBy: 'data',sortStrength: 150// workerEnabled: true       // 可选，开启 web-worker},modes: {default: ['drag-canvas', 'drag-node', 'zoom-canvas'],},//设置node样式defaultNode: {type: 'image',size: 80,x: 760,y: 100,labelCfg: {fontsize: 20,style: {fontsize: 20}}},//设置线条的样式defaultEdge: {type: 'line',style: {startArrow: {path: G6.Arrow.vee(10, 12),d: 70,fill: '#f00',},stroke: '#5B8FF9',lineDash: [6, 3],},labelCfg: {refY: 15,// refX: 60,}}});//定义拓扑图节点的点击事件this.graph.on('node:click', (e) => {let item = e.item;let model = item.getModel();});},

定义node节点数据

let nodes =[{id:1,label: 第一个node,img: require('@/assets/img/icon-case.png'),//自定义node数据},{id:2,label: 第二个node,img: require('@/assets/img/icon-case.png'),//自定义node数据}
]

#定义edge数据

let edges = [{source: 1,target: 2,label: '关系'}
]

将获取到的数据渲染进页面

mounted() {this.init();let data = {nodes: nodes,edges: edges}this.graph.data(data);this.graph.render();},