利用 Antv X6 绘制审批流程（单向流转）
生活随笔
收集整理的這篇文章主要介紹了
利用 Antv X6 绘制审批流程（单向流转）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Antv X6官網：https://x6.antv.vision/zh/docs/tutorial/about
首先展示一下效果：
這是只是做了一個簡單的demo，具體項目的需求就看個人怎么使用，下面附上demo的全部代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="x6.js"></script>
<title>X6流程圖</title>
<style type="text/css">
#container {
width: 100%;
height: calc(100vh);
}
@keyframes ant-line {
to {
stroke-dashoffset: -1000;
}
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<script type=" text/javascript">
const male = 'images/1.png'
X6.Graph.registerNode(
'org-node', {
180,
height: 60,
markup: [{
tagName: 'rect',
selector: 'body',
},
{
tagName: 'image',
selector: 'avatar',
},
{
tagName: 'text',
selector: 'rank',
},
{
tagName: 'text',
selector: 'name',
},
],
attrs: {
body: {
refWidth: '100%',
refHeight: '100%',
fill: '#FFFFFF',
stroke: '#000000',
strokeWidth: 2,
rx: 10,
ry: 10,
pointerEvents: 'visiblePainted',
},
avatar: {
48,
height: 48,
refX: 8,
refY: 6,
},
rank: {
refX: 0.9,
refY: 0.2,
fontFamily: 'Courier New',
fontSize: 14,
textAnchor: 'end',
//textDecoration: 'underline',
},
name: {
refX: 0.9,
refY: 0.6,
fontFamily: 'Courier New',
fontSize: 14,
fontWeight: '800',
textAnchor: 'end',
},
},
},
true,
)
const graph = new X6.Graph({
container: document.getElementById('container'),
grid: {
size: 20, //網格大小
visible: true, //是否開啟網格畫布
type: 'dot', // 'dot' | 'fixedDot' | 'mesh'| //網格樣式
args: {
color: '#75664D', // 網格線/點顏色
thickness: 1, // 網格線寬度/網格點大小
},
},
//對齊線是移動節點排版的輔助工具
snapline: true,
connecting: {
snap: true,
highlight: true,
},
})
function member(x, y, rank, name, image, background, textColor) {
return graph.addNode({
180, // Number，可選，節點大小的 width 值
height: 60, // Number，可選，節點大小的 height 值
x:x,
y:y,
shape: 'org-node',
attrs: {
body: {
fill: background,
stroke: 'none',
},
avatar: {
opacity: 0.7,
'xlink:href': image,
},
rank: {
text: rank,
fill: '#000',
wordSpacing: '-5px',
letterSpacing: 0,
},
name: {
text: name,
fill: '#000',
fontSize: 13,
fontFamily: 'Arial',
letterSpacing: 0,
},
},
})
}
const node1 = member(200, 160, '張三', '已審批(同意)', male, 'green');
const node2 = member(460, 160, '王五', '已審批(駁回)', male, 'yellow');
const node3 = member(720, 160, '李四', '正在審批中', male, 'red');
const node4 = member(980, 160, '王麻子', '未審批', male, '#f2f2f2');
const edge1 = new X6.Shape.Edge({
id: 'edge1',
source: node1,
target: node2,
router: {
name: 'er',
args: {
offset: 'center',
},
},
attrs: {
line: {
stroke: '#000',
strokeDasharray: 5,
targetMarker: 'classic',
style: {
animation: 'ant-line 30s infinite linear',
},
},
},
})
const edge2 = new X6.Shape.Edge({
id: 'edge2',
source: node2,
target: node3,
router: {
name: 'er',
args: {
offset: 'center',
},
},
attrs: {
line: {
stroke: '#000',
strokeDasharray: 5,
targetMarker: 'classic',
style: {
animation: 'ant-line 30s infinite linear',
},
},
},
})
const edge3 = new X6.Shape.Edge({
id: 'edge3',
source: node3,
target: node4,
router: {
name: 'er',
args: {
offset: 'center',
},
},
attrs: {
line: {
stroke: '#000',
strokeDasharray: 5,
targetMarker: 'classic',
style: {
animation: 'ant-line 30s infinite linear',
},
},
},
})
graph.addEdge(edge1)
graph.addEdge(edge2)
graph.addEdge(edge3)
</script>
</html>
節點之間的動畫屬性=》
<style>
@keyframes ant-line {
to {
stroke-dashoffset: -1000;
}
}
</style>
js下載鏈接: https://pan.baidu.com/s/1YSezUqOTqdPkBCDTfA7Rpg 提取碼: 976p
總結
以上是生活随笔為你收集整理的利用 Antv X6 绘制审批流程（单向流转）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql -uroot -p -P33
- 下一篇： zabbix笔记之告警配置