利用 Antv X6 绘制审批流程（单向流转）

2021/6/10 10:35:57

编程Tag： const name 单向 true attrs X6 AntV 000

本文主要是介绍利用 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);
            }
        </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

这篇关于利用 Antv X6 绘制审批流程（单向流转）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

利用 Antv X6 绘制审批流程（单向流转）

相关编程文章