g6结合vue使⽤
g6在vue中使⽤⼩结
前⾔
由于项⽬需求，需要动态⽣成流程图，仅⽤于展⽰效果，搜了很多开源插件，最后决定使⽤阿⾥的antVG6，但是g6官⽅⽂档中还是有⼀些问题，⽹上相关的资料也⽐较少，⾃⼰摸索了⼀段时间，踩过很多坑，我就⾃⼰写个备忘，也与⼤家分享⼀下，g6提供了很多流程图的api，我的需求并没有涉及到交互，所以我也没弄，感兴趣的可以⾃⼰看⼀下。g6官⽅⽂档地址：
www.yuque/antv/g6/intro
vue中进⾏引⼊
通过 npm 安装
npm install @antv/g6 --save
在组件内进⾏引⼊（全局的话可在main.js中引⼊）
import G6from'@antv/g6';
vue中使⽤
HTML部分,⽤于画布的容器，可设置背景⾊，宽⾼等（⼀定是id选择器）
<template>
<div>
<div id="mountNode"></div>
</div>
</template>
JS部分，主要撸码位置，画图⽅法最好写在mounted⾥⾯，nodeEach⽅法⽤于遍历数据，主要⽤于不同的class值可以展⽰不同的图形，便于实现动态⽣成。（注意：node.style写法，node.style.stroke这种写法会报错）
mounted(){
this.initG6()
}
methods:{
initG6(){
const data ={
// 点集
nodes:[{
id:'node0',// 元素的 id
class:'c0',// 元素的图形
label:'开始',// 标签⽂字
labelCfg:{//⽂字配置
style:{
fill:'red',
}
},
// x: 100,      // Number，可选，节点位置的 x 值
// y: 200,      // Number，可选，节点位置的 y 值
},{
id:'node1',// String，该节点存在则必须，节点的唯⼀标识
class:'c1',
label:'节点1',// 节点⽂本
color:'#000',
id:'node2',// String，该节点存在则必须，节点的唯⼀标识
class:'c2',
label:'节点2'// 节点⽂本
},{
id:'node3',
img:'img/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000',          shape:'image',
size:50,
labelCfg:{
position:'bottom',vuejs流程图插件
},
},{
id:'node4',// String，该节点存在则必须，节点的唯⼀标识
class:'c3',
label:'⽬标点',// 节点⽂本
anchorPoints:[
[0.5,0.5],[1,0.5]
]
},
{
id:'node0.1',// 元素的 id      // 元素的图形
// label: 'node0.1',
x:200,
y:300,
shape:'modelRect',
size:[100,40],
label:'你好你好你好',
preRect:{
// 设置为false，则不显⽰
show:false,
},
labelCfg:{
//⽂字向左偏移量
offset:5,// 标签配置属性
positions:'left',// 标签的属性，标签在元素中的位置
style:{// 包裹标签样式属性的字段 style 与标签其他属性在数据结构上并⾏
fontSize:12// 标签的样式属性，⽂字字体⼤⼩
}
},
logoIcon:{//左侧
show:true,
width:12,
height:12,
offset:-10,
img:'gw.alipayobjects/zos/basement_prod/c781088a-c635-452a-940c-0173663456d4.svg' },
stateIcon:{//右侧
show:false,
}
}
],
// 边集
edges:[{// 表⽰⼀条从 node1 节点连接到 node2 节点的边
source:'node0',// String，必须，起始点 id
target:'node4',// String，必须，⽬标点 id
},
{
source:'node0',
target:'node0.1',
},{
const nodes = des
const graph =new G6.Graph({
// 1.画图挂载容器id
container:'mountNode',
// 1.1容器宽⾼
width:800,
height:600,
fitView:true,
fitViewPadding:[20,40,50,20],
// 节点在默认状态下的样式配置（style）和其他配置
defaultNode:{
// 节点上的标签⽂本配置
labelCfg:{
// 节点上的标签⽂本样式配置
style:{
fill:'#000',// 节点标签⽂字颜⾊
fontSize:11,
}
}
},
//边默认的属性，包括边的⼀般属性和样式属性（style）。
defaultEdge:{
shape:'line',
color:'#000',
endArrow:true,
startArrow:true,
labelCfg:{
autoRotate:true
},
style:{//箭头
endArrow:{
path:'M 4,0 L -4,-4 L -4,4 Z',
d:4
}
}
},
});
// 读取 data 中的数据源到图上
graph.data(data);
// 渲染图
fitView:true;//设置是否将图适配到画布中；
// fitViewPadding: [20, 40, 50, 20]//画布上四周的留⽩宽度。
}
// 节点遍历，确定图形
nodeEach(nodes){
nodes.forEach(node =>{
if(!node.style){
node.style ={}
}
switch(node.class){// 根据节点数据中的 class 属性配置图形case'c0':{
node.shape ='circle';
node.size =40;// class = 'c0' 时节点图形为 circle
break;
}
case'c1':{
node.shape ='rect';// class = 'c1' 时节点图形为 rect
node.size =[80,40];// class = 'c1' 时节点⼤⼩
stroke:'#00CC00',
fill:'#00CC00',
radius:45
}
break;
}
case'c2':{
node.shape ='ellipse';// class = 'c1' 时节点图形为 ellipse            node.size =[80,40];// class = 'c2' 时节点⼤⼩
break;
}
case'c3':{
node.shape ='diamond';// class = 'c1' 时节点图形为 ellipse            node.size =[60,60];// class = 'c2' 时节点⼤⼩
break;
}
}
}
实现效果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。