vue + antV G6 实现流程图完整代码 （antv G6 流程图）

效果如下：

 

 代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Demo</title>
        <script src="js/vue.min.js"></script>
        <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js"></script>
    </head>
    <body>
        <div id="app">
            <div id="mountNode"></div>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    nodes: [ 
                        {
                            id: '1', 
                            label:'开始',
                            x: 80, 
                            y: 80, 
                            size: [100, 50],
                            shape: 'ellipse',  //rect方形  ellipse 椭圆 diamond 菱形
                            style: {
                                radius:30, //bordr-radius
                                stroke: '#afe2a9', //border色
                                fill: '#f1fcf1', //填充色
                                lineWidth: 2 //border宽
                            }
                        },
                        {
                            id: '2', 
                            x: 240, 
                            label:'过程',
                            y: 80, 
                            size: [100, 50],
                            shape: 'rect',
                            style: {
                                radius:10, //bordr-radius
                                stroke: '#afcdda', //border色
                                fill: '#e8f3f5', //填充色
                                lineWidth: 2 //border宽
                            }
                        },
                        {
                            id: '3',
                            x: 400,
                            y: 80, 
                            label:'判断',
                            size: [110,60],
                            shape: 'diamond', //菱形
                            style: {
                                radius:25, //bordr-radius
                                stroke: '#7d7dc5', //border色
                                fill: '#e3e4fa', //填充色
                                lineWidth: 2 //border宽
                            }
                        },
                        {
                            id: '4', 
                            x: 400, 
                            y: 200, 
                            size: [100,50],
                            label:'维修',
                            shape: 'rect',
                            style: {
                                radius:10,
                                stroke: '#fbb9b8',
                                fill: '#f9e7e6',
                                lineWidth: 2 
                            }
                        },
                        {
                            id: '5', 
                            x: 560, 
                            y: 80, 
                            size: [100, 50],
                            shape: 'ellipse',
                            label:'装箱',
                            style: {
                                stroke: '#b3b8b5',
                                fill: '#ffffff',
                                lineWidth: 2 
                            }
                        },
                    ],
                    edges: [
                        {source: '1',target: '2', label: '贴片'},
                        {source: '2', target: '3',  label: '贴片'},
                        {source: '3', target: '5', label: '打样'},
                        {source: '3', target: '4', label: '维修'},
                    ]
                },
                methods: {
                    dataFun(){
                        this.edges.forEach((item,index)=>{
                            Object.assign(item,{shape:'line'})
                            Object.assign(item,{color:'#ccc'})
                            Object.assign(item,{size:2})
                            Object.assign(item,{labelCfg: {
                                refY: 15,
                                position: 'center',
                                autoRotate: false,
                                style: {
                                    lineWidth: 20, 
                                    fill: '#989d9b', 
                                }
                            }})
                        })
                    }
                },
                mounted() {
                    const graph = new G6.Graph({
                        container: 'mountNode',
                        width: 700,
                        height: 300,
                        defaultNode: {
                            label: 'node-label',
                            labelCfg: {
                                offset: [10, 10, 10, 10],
                                style: {
                                    fill: '#797b7e',
                                    fontSize: 15,
                                    fontWeight: 'bold'
                                }
                            },
                        }
                    });
                    
                    let info = {};
                    info['nodes'] = this.nodes;
                    info['edges'] = this.edges;
                    graph.data(info);
                    graph.render();
                },
                created() {
                    this.dataFun()
                }
            });
        </script>
    </body>
</html>

说明：
vue为本地的静态文件，需自己替换。

 

posted @ 2022-10-24 16:56  烂笔头~  Views(1987)  Comments(0)    收藏  举报