效果如下：

代码如下：

<!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为本地的静态文件，需自己替换。

vue + antV G6 实现流程图完整代码 （antv G6 流程图）的更多相关文章

  1. div css仿京东订单流程图样式代码

    效果展示 http://hovertree.com/texiao/css/25/ 本效果适合PC,也适合移动端 手机扫描二维码查看效果: 效果图: 代码如下: <!DOCTYPE html> ...

  2. log4net保存到数据库系列四、完整代码配置log4net

    园子里面有很多关于log4net保存到数据库的帖子,但是要动手操作还是比较不易,从头开始学习log4net数据库日志一.WebConfig中配置log4net 一.WebConfig中配置log4ne ...

  3. java mail实现Email的发送,完整代码

    java mail实现Email的发送,完整代码 1.对应用程序配置邮件会话 首先, 导入jar <dependencies> <dependency> <groupId ...

  4. JavaScript与html5写的贪吃蛇完整代码

    JavaScript与html5写的贪吃蛇完整代码 查看运行效果可访问http://www.codesocang.com/texiao/youxitexiao/2014/0402/7045.html# ...

  5. 【搜索引擎Jediael开发4】V0.01完整代码

    截止目前,已完成如下功能: 1.指定某个地址,使用HttpClient下载该网页至本地文件 2.使用HtmlParser解释第1步下载的网页,抽取其中包含的链接信息 3.下载第2步的所有链接指向的网页 ...

  6. jQuery弹出窗口完整代码

    jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...

  7. python实现邮件发送完整代码（带附件发送方式）

    实例一:利用SMTP与EMAIL实现邮件发送,带附件(完整代码) __author__ = 'Administrator'#coding=gb2312 from email.Header import ...

  8. 基于Python使用SVM识别简单的字符验证码的完整代码开源分享

    关键字:Python,SVM,字符验证码,机器学习,验证码识别 1   概述 基于Python使用SVM识别简单的验证字符串的完整代码开源分享. 因为目前有了更厉害的新技术来解决这类问题了,但是本文作 ...

  9. 单点登录SSO：可一键运行的完整代码

    单点登录方案不同于一个普通站点,它的部署比较繁琐:涉及到好几个站点,要改host.安装证书.配置HTTPS. 看到的不少这方面示例都是基于HTTP的,不认同这种简化: 1. 它体现不出混合HTTP/H ...

  10. Delphi实现图像文本旋转特效完整代码

    Delphi实现图像文本旋转特效完整代码,本程序利用的控件主要是Panel 控件.Image 控件.Edit 控件.Label 控件和Button 控件.本程序的关键是利用Delphi 的bmp_ro ...

随机推荐

  1. Postman 测试 Web Service 和 WCF

    一.postman 测试web service(1)设置url http://www.oorsprong.org/websamples.countryinfo/countryinfoservice.w ...

  2. Cendos中启动docker失败的问题

    注:在 Windows中使用Linux虚拟机中使用Cendos 刚开始安装Docker时没有任何错误, 但是在后续的docker启动过程中, 出现以下问题: 按提示使用 systemctl statu ...

  3. java.sql.SQLIntegrityConstraintViolationException: Duplicate entry '1' for key 'PRIMARY'

    你设置的主键里面已经有一个值为1的数值了,再插入一个就重复了. 但是主键是不能重复的.

  4. Redis实战（三）Redis冷备如何做

    Redis 的 RDB 持久化方案,相信大家都有所了解,但是对于企业来说,如果只是持久化了一个 RDB 文件,不足以应付生产级别的事故.通常的方案就是对 RDB 进行多个备份,今天带大家来真枪实弹操作 ...

  5. 本地开发环境使用redis

    1.使用cmd 连接后,查询结果出现乱码时, 尝试连接时加--raw 参数 2.如果还是乱码,设置cmd 窗口编码 chcp 65001 就是换成UTF-8代码页chcp 936 可以换回默认的GBK ...

  6. 【git】2.1 获取git仓库

    资料来源 (1) https://git-scm.com/book/zh/v2/Git-%E5%9F%BA%E7%A1%80-%E8%8E%B7%E5%8F%96-Git-%E4%BB%93%E5%B ...

  7. Python语言基础学习报告

    这个学期我们开设了一门新课程---Python,早在很久之前,我就经常在各种有关职场的帖子下面看到这个词,且多为夸赞,因此,尽管大一深受C语言和数据结构两门课的折磨,我还是怀着十分的认真和敬意开始了这 ...

  8. File.createTempFile()

    File.createTempFile()的两个参数,是前缀和后缀,临时文件的文件名,会在前缀和后缀中各截取一部分,再拼接上随机数进行生成: 推荐手动指定目录,尽量指定到项目路径下,默认的磁盘位置,有 ...

  9. win10 右键文件夹卡死

    遇到右键文件夹卡死的问题,网上查找尝试, 命令窗口输入如下命令: SFC/Scannow 还有个思路 ,360安全 软件大全下载一个右键管理软件删除多余无用的右键选项: 参考:https://answ ...

  10. drush use dev.mentor.com | expecting statement

    在多站点的环境中, 不清楚在哪个目录下运行drush cc all, 这时可以运行 drush use dev.mentor.com然后还发现一个很搞笑的事情, 在一个文件的末尾一直现实红色报错符号, ...