Vue3 + Antv X6画带动画效果的流程图

Vue3 + Antv X6画带动画效果的流程图

1 Vue3使用antv x6需要的依赖包

"dependencies": {
    "@antv/x6": "^2.13.1",
    "@antv/x6-vue-shape": "^2.1.1",
    "insert-css": "2.0.0"
  },

2 自定义节点

Antv X6定义节点：可以创建一个.vue文件，使用vue3+ts+style定义节点样式，

3 父页面引入自定义节点的.vue文件

<template>
	<TeleportContainer />    
</templage>

<script setup lang="ts">
import NodeItem from '.node.vue'  //2中自定义节点的vue文件
import { getTeleport } from '@antv/x6-vue-shape'
const TeleportContainer = getTeleport()//正确加载div子组件


//注册自定义的节点
register({
  shape: 'node-item',        //自定义节点的名称，这里自己可命名成任意名称
  width: 180,
  height: 36,
  component: NodeItem,   //自定义节点的组件名称
})

</script>

4 线条流动效果

style中定义animation

edge.attr('line', 
	{
        stroke: "rgba(111,206,228,0.8)",  //颜色
        strokeDasharray: 6,  //虚线
        targetMarker: {
            name: 'classic',
            size: 6          //箭头大小
        },
        strokeWidth: 1.5,    //线条宽度
        style: {
            animation: 'ant-line 30s infinite linear',  //动画效果
        },
    })

在style中定义ant-line动画效果

<style>
@keyframes ant-line {
  to {
    stroke-dashoffset: -1000;
  }
}
</style>

5 修改默认边的效果

Antv X6中使用graph.createEdge初始化边，默认边是浅灰色

const cells: Cell[] = []
  data.edges.forEach((item) => {
   cells.push(graph.createEdge(item))   //初始化边
  })

由于不符合我界面配色，我需要修改这种默认的配色，使用graph.addEdge一条一条的添加边

//自定义边'dag-edge'
Graph.registerEdge(
  'dag-edge',
  {
    inherit: 'edge',
    attrs: {
      line: {
        stroke: 'rgba(176, 193, 234, 0.1)',   //设置颜色
        strokeWidth: 1.5,                     //设置宽度
        targetMarker: null,
      },
    },
  },
  true
)
//遍历，初始化边
data.edges.forEach((item) => {
    cells.push(
      graph.addEdge({
        shape: 'dag-edge',        
        source: item.source,
        target: item.target,
      })
    )
  })

6 节点状态切换

通过设置节点的status，参考antv x6官网即可。default、running和success状态的切换
running状态，需要el-icon引入的图标360度旋转，使用css设置animation实现

<template>
	<el-icon v-if="data?.status === 'running'" class="status-running-icon">
      <RefreshLeft />
    </el-icon>
</template>

<style scoped>
.status-running-icon {
    position: absolute;
    right: 8px;
    color: #57c5ff;
    animation: rotate 3s linear infinite;  //自定义rotate动画
    font-size: 16px;
  }

  @keyframes rotate {
    0% {
      transform: rotate(0);
    }

    25% {
      transform: rotate(90deg);
    }

    50% {
      transform: rotate(180deg);
    }

    75% {
      transform: rotate(270deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }
</style>