前端生成拓扑图_前端拓扑图

应用npm库：@antv/x6

地址：https://x6.antv.antgroup.com/examples

支持自定义连接线的样式，支持自定义节点

1.注册节点样式

import { register } from '@antv/x6-vue-shape';

  register({

    shape: 'large-item',

    width: 100,

    height: 130,

    component: phoneLargeItem,

    ports: getPorts(100, 130),

  });

phoneLargeItem为引入的vue文件，可自定义样式，引入后作为拓扑图的节点

 2.生成图

const graph = new Graph({

      container: document.getElementById('g-container_' + taskId) as HTMLElement,

      autoResize: true,

      interacting: {

        nodeMovable: false,

        edgeMovable: true,

      },

    });

    const box = document.querySelector('#g-container_' + taskId);

    const boxRect = box?.getBoundingClientRect();

    //加入节点

    graph.addNode(

      getNodePorps({

        x: 50,

        y:  65,

        shape: 'large-item',

        id: 'cell',

        data: { id: 1 },//这个data可以被vue界面引入

      }),

    );

vue界面获取数据

  const node = getNode();

  const { data } = node;