意大利做包招工的网站,凡客诚品网,北京网站设计济南兴田德润团队怎么样,国外调色网站大家好#xff0c;这次使用的是AntV的蚂蚁数据可视化X6框架#xff0c;类似于审批流的场景等#xff0c;代码如下#xff1a; X6框架参考网址#xff1a;https://x6.antv.vision/zh/examples/showcase/practices#bpmn 可以进入该网址#xff0c;直接复制下方代码进行调试…大家好这次使用的是AntV的蚂蚁数据可视化X6框架类似于审批流的场景等代码如下 X6框架参考网址https://x6.antv.vision/zh/examples/showcase/practices#bpmn 可以进入该网址直接复制下方代码进行调试或观察。 效果图如下
canvas idcontainer/canvasimport { Graph, Cell } from antv/x6const 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 })
