审批流AntV框架蚂蚁数据可视化X6饼图（附注释）

大家好，这次使用的是AntV的蚂蚁数据可视化X6框架，类似于审批流的场景等，代码如下：
X6框架参考网址：https://x6.antv.vision/zh/examples/showcase/practices#bpmn
可以进入该网址，直接复制下方代码进行调试或观察。
效果图如下：

<canvas id="container"></canvas>

import { Graph, Cell } from '@antv/x6'

const data = [
  {
    "id": "1",
    "shape": "event",
    "width": 40,
    "height": 40,
    "position": {
      "x": 50,
      "y": 180
    }
  },
  {
    "id": "2",
    "shape": "activity",
    "width": 100,
    "height": 60,
    "position": {
      "x": 20,
      "y": 280
    },
    "label": "请假申请"
  },
  {
    "id": "3",
    "shape": "bpmn-edge",
    "source": "1",
    "target": "2"
  },
  {
    "id": "4",
    "shape": "gateway",
    "width": 55,
    "height": 55,
    "position": {
      "x": 170,
      "y": 282.5
    }
  },
  {
    "id": "5",
    "shape": "bpmn-edge",
    "source": "2",
    "target": "4"
  },
  {
    "id": "6",
    "shape": "activity",
    "width": 100,
    "height": 60,
    "position": {
      "x": 300,
      "y": 240
    },
    "label": "领导审批"
  },
  {
    "id": "7",
    "shape": "activity",
    "width": 100,
    "height": 60,
    "position": {
      "x": 300,
      "y": 320
    },
    "label": "人事审批"
  },
  {
    "id": "8",
    "shape": "bpmn-edge",
    "source": "4",
    "target": "6"
  },
  {
    "id": "9",
    "shape": "bpmn-edge",
    "source": "4",
    "target": "7"
  },
  {
    "id": "10",
    "shape": "gateway",
    "width": 55,
    "height": 55,
    "position": {
      "x": 460,
      "y": 282.5
    }
  },
  {
    "id": "11",
    "shape": "bpmn-edge",
    "source": "6",
    "target": "10"
  },
  {
    "id": "12",
    "shape": "bpmn-edge",
    "source": "7",
    "target": "10"
  },
  {
    "id": "13",
    "shape": "activity",
    "width": 100,
    "height": 60,
    "position": {
      "x": 560,
      "y": 280
    },
    "label": "人事审批"
  },
  {
    "id": "14",
    "shape": "bpmn-edge",
    "source": "10",
    "target": "13"
  },
  {
    "id": "15",
    "shape": "event",
    "width": 40,
    "height": 40,
    "position": {
      "x": 710,
      "y": 290
    },
    "attrs": {
      "body": {
        "strokeWidth": 4
      }
    }
  },
  {
    "id": "16",
    "shape": "bpmn-edge",
    "source": "13",
    "target": "15"
  }
]
// 设置event类型节点的样式（起点和终点的样式）
Graph.registerNode(
  'event',
  {
    inherit: 'circle',
    attrs: {
      body: {
        strokeWidth: 2,
        stroke: '#5F95FF',
        fill: '#FFF',
      },
    },
  },
  true,
)
// 设置activity类型节点的样式
Graph.registerNode(
  'activity',
  {
    inherit: 'rect',
    markup: [
      {
        tagName: 'rect',
        selector: 'body',
      },
      {
        tagName: 'image',
        selector: 'img',
      },
      {
        tagName: 'text',
        selector: 'label',
      },
    ],
    attrs: {
      body: {
        rx: 6,
        ry: 6,
        stroke: '#5F95FF',
        fill: '#EFF4FF',
        strokeWidth: 1,
      },
      img: {
        x: 6,
        y: 6,
        width: 16,
        height: 16,
        'xlink:href':
          'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*pwLpRr7QPGwAAAAAAAAAAAAAARQnAQ',
      },
      label: {
        fontSize: 12,
        fill: '#262626',
      },
    },
  },
  true,
)
// 设置gateway类型节点的样式
Graph.registerNode(
  'gateway',
  {
    inherit: 'polygon',
    attrs: {
      body: {
        refPoints: '0,10 10,0 20,10 10,20',
        strokeWidth: 2,
        stroke: '#5F95FF',
        fill: '#EFF4FF',
      },
      label: {
        text: '+',
        fontSize: 40,
        fill: '#5F95FF',
      },
    },
  },
  true,
)
// 设置bpmn-edge类型线段的样式
Graph.registerEdge(
  'bpmn-edge',
  {
    inherit: 'edge',
    attrs: {
      line: {
        stroke: '#A2B1C3',
        strokeWidth: 2,
      },
    },
  },
  true,
)
// 设置展示canvas图表的容器
const graph = new Graph({
  container: document.getElementById('container')!,
  connecting: {
    router: 'orth',
  },
})

// 处理一下数据的格式，开始渲染图表
const cells = []
data.forEach((item: any) => {
  if (item.shape === 'bpmn-edge') {
    cells.push(graph.createEdge(item))
  } else {
    cells.push(graph.createNode(item))
  }
})
graph.resetCells(cells)
graph.zoomToFit({ padding: 10, maxScale: 1 })

最后，原创不易，如本文对您有所帮助，麻烦点个赞收藏谢谢！