vue3项目使用@antv/g6实现可视化流程功能

---

项目需求

antv/G6 - 4.8.24 版本地址
实现一个流程图，根据不同阶段、不同功能、不同状态来显示图形
1、线，需要根据状态展示不同的颜色和动画效果
2、节点部分区域需要点击功能
3、文本太长需要显示…(三个点)
4、不同状态的节点需要使用不同icon(svg图片)
5、根据需求，采用G6缩进树的布局方式，缩进树地址
6、鼠标悬浮需要展示详情数据
7、需要操作栏快速缩放还原比例

一、需要解决的问题

1、4xx版本，节点拖拽会留下痕迹，由于我画布是白色的底，所以使用官方提供的解决方案，就是在节点最底层画一个白色的矩形（图形后画的会覆盖先画）

二、初步使用

1.动态数据-组件封装(解决拖拽会留下痕迹的问题，引用图片，在节点右上角渲染图标，实现，事现旋转动画，达到loading效果)

由于旋转会绕着节点的中心点，所以需要将节点的中心点移到右上角图形的中心
假设：右上角图形中心点距离顶部和在右边的距离是12，则中心点设置为（-w + 12，-12）
vue3代码如下（示例）：

<template>
  <div
    id="mountNode"
    ref="mountNodeRef"
  ></div>
</template>
<script setup lang="ts">
import {
    ref,reactive } from 'vue'
import G6 from '@antv/g6'
import runImg from '@/assets/run.svg'

const treeGraph = reactive<any>({
   
  graph: {
   },
})

interface DataType{
   
	id:string
	children:DataType[]
}

const drawerImg= (cfg: any, group: any, w: number, h: number) => {
   
  // 图片
  let img
  switch (cfg.status) {
   
    case StatusType.ING:
      img = runImg
      break
    case StatusType.ABNORMAL:
      img = abnormalImg
      break
    case StatusType.END:
      img = successImg
      break
    default:
      img = waitImg
  }
  const image = group.addShape('image', {
   
    attrs: {
   
      x: -8,
      y: -8,
      width: 16,
      height: 16,
      img, // import 引入的图片
    },
    name: 'image-shape',
  })
  // 旋转动画
  if (cfg.status === StatusType.ING) {
   
    image.animate(
      (ratio: any) => {
   
        // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。
        // 旋转通过矩阵来实现
        // 当前矩阵（矩阵文档中有描述）
        const matrix = [1, 0, 0, 0, 1, 0, 0, 0, 1]
        // 目标矩阵
        const toMatrix = G6.Util.transform(matrix, [['r', ratio * Math.PI * 2]])
        // 返回这一帧需要的参数集，本例中只有目标矩阵
        return {
   
          matrix: toMatrix,
        }
      },
      {
   
        repeat: true, // 动画重复
        duration: 3000,
        easing: 'easeLinear',
      }
    )
  }
}


// 注册自定义节点
G6.registerNode('card-node', {
   
  draw: function drawShape(cfg: any, group) {
   
    // 获取初始化时defaultNode设置的宽高
    const w = cfg.size[0]
    const h = cfg.size[1]
    
    // 中心点坐标（默认是节点左上角），这里设置成图形中心（影响图像旋转等功能）
    // const centerX =  -w / 2
    // const centerY = -h / 2
    // 中心点坐标（默认是节点左上角），这里设置成节点右上角距离顶部和右边12的位置
    const centerX = -w + 12
    const centerY = -12
 
    const r = 10 // 边的倒角 radius
    const color = '#004CFE' // 文本颜色
    const baseColor = '#001043' // 文本颜色
    const backgroundColor = 'rgba(0,76,254,0.2)' // 填充颜色

    // 主图，容器矩形，画白色容器矩形，防止拖拽产生的痕迹
    const shape = group.addShape('rect', {
   
	   attrs: {
   
	      x: centerX,
	      y: centerY,
	      width: w,
	      height: h,
	      shadowColor: 'rgba(0,0,0,0.16)',
	      shadowOffsetX: 0,
	      shadowOffsetY: 0,
	      shadowBlur: 4,
	      radius: r, // 4个角都设置圆角
	      fill: '#fff',
	    },