审批流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 })

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