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为本地的静态文件，需自己替换。
vue + antV G6 实现流程图完整代码 （antv G6 流程图）的更多相关文章
- div css仿京东订单流程图样式代码
效果展示 http://hovertree.com/texiao/css/25/ 本效果适合PC,也适合移动端 手机扫描二维码查看效果: 效果图: 代码如下: <!DOCTYPE html> ...
- log4net保存到数据库系列四、完整代码配置log4net
园子里面有很多关于log4net保存到数据库的帖子,但是要动手操作还是比较不易,从头开始学习log4net数据库日志一.WebConfig中配置log4net 一.WebConfig中配置log4ne ...
- java mail实现Email的发送,完整代码
java mail实现Email的发送,完整代码 1.对应用程序配置邮件会话 首先, 导入jar <dependencies> <dependency> <groupId ...
- JavaScript与html5写的贪吃蛇完整代码
JavaScript与html5写的贪吃蛇完整代码 查看运行效果可访问http://www.codesocang.com/texiao/youxitexiao/2014/0402/7045.html# ...
- 【搜索引擎Jediael开发4】V0.01完整代码
截止目前,已完成如下功能: 1.指定某个地址,使用HttpClient下载该网页至本地文件 2.使用HtmlParser解释第1步下载的网页,抽取其中包含的链接信息 3.下载第2步的所有链接指向的网页 ...
- jQuery弹出窗口完整代码
jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...
- python实现邮件发送完整代码（带附件发送方式）
实例一:利用SMTP与EMAIL实现邮件发送,带附件(完整代码) __author__ = 'Administrator'#coding=gb2312 from email.Header import ...
- 基于Python使用SVM识别简单的字符验证码的完整代码开源分享
关键字:Python,SVM,字符验证码,机器学习,验证码识别 1 概述 基于Python使用SVM识别简单的验证字符串的完整代码开源分享. 因为目前有了更厉害的新技术来解决这类问题了,但是本文作 ...
- 单点登录SSO：可一键运行的完整代码
单点登录方案不同于一个普通站点,它的部署比较繁琐:涉及到好几个站点,要改host.安装证书.配置HTTPS. 看到的不少这方面示例都是基于HTTP的,不认同这种简化: 1. 它体现不出混合HTTP/H ...
- Delphi实现图像文本旋转特效完整代码
Delphi实现图像文本旋转特效完整代码,本程序利用的控件主要是Panel 控件.Image 控件.Edit 控件.Label 控件和Button 控件.本程序的关键是利用Delphi 的bmp_ro ...
随机推荐
- JAVA集合框架特征介绍
数据结构是以某种形式将数据组织在一起的集合,它不仅存储数据,还支持访问和处理数据的操作.Java提供了几个能有效地组织和操作数据的数据结构,这些数据结构通常称为Java集合框架.在平常的学习开发中,灵 ...
- 51电子-STC89C51开发板：程序烧录(刷写) 到 IC 设置
全部内容,请点击: 51电子-STC89C51开发板:<目录> --------------------------- 正文开始 --------------------------- ...
- 直播软件搭建，姓名，身份证input验证过滤
直播软件搭建,姓名,身份证input验证过滤 姓名验证:需求,可输入英文.汉字 for(let i=0;i<e.length;i++){ if(/^[a-zA-Z\u4e00-\u9fa5]+ ...
- ubuntu 删除容器内没用的包
删除多余 apt 包 这些就是依赖的所有动态链接库,接着我们将这些包用 apt-mark 声明为"手工安装的包",即可阻止 apt purge 的自动卸载. 然后,我们再自动卸载其 ...
- VSCode 抽取vue的代码片段
在vscode中文件-->首选项-->用户片段,输入名字按去确定,输入代码片段 { "vue htm": { "scope": "html ...
- win10 安装mariadb
在MariaDB10.2.17 以前.解压后在目录下看到my-huge.ini.my-innodb-heavy-4G.ini.my-large.ini.my-medium.ini.my-small.i ...
- C# List间的交集并集差集
一.简单类型List的交集并集差集 1.先定义两个简单类型的List List<int> listA = new List<int>() { 1, 2, 3, 4, 5, 6, ...
- 【运维】通过gotty实现网页代理访问服务器及K8S容器操作实践
Gotty 是Golang编写的可以方便的共享系统终端为web应用,是一个灵活强大的通过web访问终端的工具.本文将主要通过搭建Gotty实现对K8S容器的访问操作,开发如果想要正常的进行容器访问以及 ...
- Element--->>>最新骨架屏Skeleton使用
首先,Element在最近的一次更新中(时间:2021-06-29) 新增了Skeleton骨架屏组件.Empty空状态组件. 那么在使用其自带组件Skeleton时,应将按照如下步骤使用: Ⅰ:如果 ...
- Debian 迁移到新硬盘
老硬盘 A,新硬盘 B,先把B分好区,做好格式化. 准备虚拟机一台,Linux LiveCD光盘或者可用的Linux虚拟机系统,把硬盘A B 映射成虚拟机可以使用的硬盘文件,根据LiveCD新建相应的 ...