效果图如下：（连接线是有动画的，模拟数据传输特效）

 

核心代码：

 在创建画布的时候即可设置连接线样式，通过createEdge属性即可实现，代码如下：

    connecting: {snap: {radius: 50, //自动吸附，并设置自动吸附路径},allowBlank: false, // 是否允许连接到画布空白位置的点(就是能不能拉线连空白的地方)allowLoop: false, // 是否允许创建循环连线，即边的起始节点和终止节点为同一节点，就是能不能自我连线（箭头不能穿过仪器）allowNode:false, //是否允许边连接到节点（非节点上的连接桩），默认为 true 。（就是要让它必须连接到连接桩，连接到节点不行）allowEdge:false, //是否可以同一个起点终点，在箭头的线中间加一个箭头，就是一条线能一直加箭头allowMulti: true, // 是否可以一个起点连多个终点highlight: true, // 拖动边时，是否高亮显示所有可用的连接桩或节点，默认值为 false 。一般都会与 highlighting 联合使用。createEdge() {return new Shape.Edge({attrs: {line: {stroke: '#1890ff',strokeDasharray: 5,style: {animation: 'ant-line 30s infinite linear',},strokeWidth: 2,    // 设置连接线宽度targetMarker: null, // 去掉终点箭头sourceMarker: null, // 去掉起点箭头},},});},},

在全局注册连接线特效，方便AntVX6检测到样式。 

<template><RouterView />
</template><script setup lang="ts"></script><style>
body {margin: 0; /* 修正了这里的拼写错误 */padding: 0;
}
/* 连接线特效 */
@keyframes ant-line {to {stroke-dashoffset: -1000;}
}
</style>

 

总体代码如下： 

  graph.value = new Graph({width: 1958,height: 1240,panning:true,mousewheel:true,background: {color: '#f0f7fc',},container: document.getElementById('antvcontainer')!, // 断言该值不为 nullgrid: {visible: true,type: 'doubleMesh',args: [{color: '#eee', // 主网格线颜色thickness: 1, // 主网格线宽度},{color: '#ddd', // 次网格线颜色thickness: 1, // 次网格线宽度factor: 4, // 主次网格线间隔},],},//连线交互connecting: {snap: {radius: 50, //自动吸附，并设置自动吸附路径},allowBlank: false, // 是否允许连接到画布空白位置的点(就是能不能拉线连空白的地方)allowLoop: false, // 是否允许创建循环连线，即边的起始节点和终止节点为同一节点，就是能不能自我连线（箭头不能穿过仪器）allowNode:false, //是否允许边连接到节点（非节点上的连接桩），默认为 true 。（就是要让它必须连接到连接桩，连接到节点不行）allowEdge:false, //是否可以同一个起点终点，在箭头的线中间加一个箭头，就是一条线能一直加箭头allowMulti: true, // 是否可以一个起点连多个终点highlight: true, // 拖动边时，是否高亮显示所有可用的连接桩或节点，默认值为 false 。一般都会与 highlighting 联合使用。createEdge() {return new Shape.Edge({attrs: {line: {stroke: '#1890ff',strokeDasharray: 5,style: {animation: 'ant-line 30s infinite linear',},strokeWidth: 2,    // 设置连接线宽度targetMarker: null, // 去掉终点箭头sourceMarker: null, // 去掉起点箭头},},});},},//高亮器highlighting:{// 当连接桩可以被链接时，在连接桩外围渲染一个 2px 宽的红色矩形框magnetAvailable: {name: 'stroke',args: {padding: 4,attrs: {'stroke-width': 2,stroke: 'red',},},}},});