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);
}
</style>
</head>
<body>
<div id="container" style="position: fixed;"></div>
</body>
<script type=" text/javascript">
const male = 'images/1.png'
X6.Graph.registerNode(
'org-node', {
width: 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: {
width: 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({
width: 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',
},
},
})
const edge2 = new X6.Shape.Edge({
id: 'edge2',
source: node2,
target: node3,
router: {
name: 'er',
args: {
offset: 'center',
},
},
attrs: {
line: {
stroke: '#000',
},
},
})
const edge3 = new X6.Shape.Edge({
id: 'edge3',
source: node3,
target: node4,
router: {
name: 'er',
args: {
offset: 'center',
},
},
attrs: {
line: {
stroke: '#000',
},
},
})
graph.addEdge(edge1)
graph.addEdge(edge2)
graph.addEdge(edge3)
</script>
</html>
下面是用的js以及图片
js下载链接: https://pan.baidu.com/s/1YSezUqOTqdPkBCDTfA7Rpg 提取码: 976p