-
Notifications
You must be signed in to change notification settings - Fork 3
/
work.html
107 lines (105 loc) · 2.22 KB
/
work.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>工作流</title>
<style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-2.1.2/build/g6.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-2.1.2/build/plugins.js"></script>
<script>
G6.registerNode('rect', {
getPath: function getPath(item) {
var width = 100; // 一半宽
var height = 40; // 一半高
return G6.Util.getRectPath(-width / 2, -height / 2, width, height, 10);
}
});
G6.registerEdge('flowingEdge', {
afterDraw: function afterDraw(item) {
var keyShape = item.getKeyShape();
keyShape.attr('lineDash', [10, 10]);
keyShape.attr('lineDashOffset', 0);
keyShape.animate({
lineDashOffset: -20,
repeat: true
}, 500);
}
});
var data = {
nodes: [{
id: '收集日志'
}, {
id: '入 es 集群'
}, {
id: '入 hdfs'
}, {
id: 'hive 计算'
}, {
id: 'report'
},{
id: 'report1'
}],
edges: [{
source: '收集日志',
target: '入 es 集群'
}, {
source: '收集日志',
target: '入 hdfs',
// shape: 'flowingEdge',
}, {
source: '入 hdfs',
target: 'hive 计算'
}, {
source: '入 es 集群',
target: 'hive 计算'
}, {
source: 'hive 计算',
target: 'report'
},
{
source: '收集日志',
target: 'hive 计算'
},
{
source: 'hive 计算',
target: '收集日志'
},
{
source: '入 es 集群',
target: 'report'
},
]
};
var graph = new G6.Graph({
container: 'mountNode',
fitView: 'cc',
height: window.innerHeight, // 画布高
plugins: [new G6.Plugins['layout.dagre']()],
defaultIntersectBox: 'rect' // 使用矩形包围盒
});
graph.node({
shape: 'rect',
label: function label(model) {
return model.id;
},
style: {
stroke: '#00C0A5',
fill: '#92949F',
fillOpacity: 0.45,
lineWidth: 2
}
});
graph.edge({
shape: 'polyline-round',
style: {
endArrow: true
}
});
graph.read(data);
</script>
</body>
</html>