vue + antV G6 实现流程图完整代码 （antv G6 流程图）
2024-10-21 17:22:27
效果如下：
代码如下：
<!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为本地的静态文件，需自己替换。
最新文章
- Django--自定义用户认证
- Lua与C++互相调用（上）
- vimium Keyboard Bindings
- [译]：Orchard入门——安装Orchard
- C语言字符串操作常用库函数
- js中对闭包的理解
- 转:Stack Overflow通过关注性能，实现单块应用架构的扩展能力
- Android中SharedPreferences和序列化结合保存对象数据
- 第六周PTA作业
- ios swift版 sqlite3详解
- 使用datagrip链接mysql数据库的报错问题.
- 2019/4/17 wen 注解、垃圾回收、多线程
- 转：SAX解析的characters方法被多次调用
- Docker7之Docker overview
- b2BuoyancyController 使用浮力
- c# winform 获取当前程序运行根目录,winform 打开程序运行的文件夹
- 又一个改写MBR的病毒（TDSS TDL4）
- InvalidateRect()与Invalidate()的用法(转)
- 使用aidl的项目结构以及小的注意事项
- 【CF Round 434 B. Which floor?】