vue中使用g6实现流程图
mounted() {
this.initG6()
},
methods: {
initG6() {
const data = {
nodes: [{
id:'node1',
x: 100,//节点x轴位置
y: 100,//节点y轴位置
size:60,//图形尺寸
type: 'circle',//节点的形状
label: 'circle圆形'//节点内的文本名称
}, {
id:'node2',
x: 220,
y: 100,
size: [90, 50],//节点的长宽值
type: 'rect',
label: 'rect矩形'
}, {
id:'node3',
x: 350,
y: 100,
size: [80, 40],
type: 'ellipse',
label: 'ellipse椭圆',
labelCfg: {
position: 'bottom',
offset: 5
},
style: {
fill: '#fa8c16',
stroke: '#000',
lineWidth: 2
}
}, {
id:'node4',
x: 460,
y: 100,
size: [100, 80],
type: 'diamond',
label: 'diamond菱形'
}, {
id:'node5',
x: 600,
y: 100,
type: 'triangle',
label: 'triangle三角形',
labelCfg: {
position: 'right',
offset: 5
},
}, {
id:'node6',
x: 220,
y: 210,
size: 65,
type: 'star',
label: 'star五角星'
}, {
id:'node7',
x: 350,
y: 220,
size: 60,
type: 'image',
img: '/zos/rmsportal/',
label: 'image自定义图片'
}, {
id:'node8',
x: 550,
y: 220,
description: '描述文本xxxxxxxxxxx',
type: 'modelRect',
label: 'modelRect文本描述'
}],
edges: [{
source: "node1",
target: "node2"
}, {
source: "node2",
target: "node3"
}, {
source: "node3",
target: "node4"
}, {
source: "node4",
target: "node5"
}, {
source: "node1",
target: "node6"
}, {
source: "node6",
target: "node7"
}, {
source: "node7",
target: "node8"
},{
source: "node8",
target: "node5"
}]
};
const graph = new G6.Graph({
container: 'mountNode',
width: window.innerWidth,
height: window.innerHeight,
modes: {
default: ['drag-canvas', 'zoom-canvas', 'drag-node'], // 允许拖拽画布、放缩画布、拖拽节点
},
defaultEdge: {
shape: 'polyline',
style: {
endArrow: true,
lineWidth: 2,
stroke: '#666'
}
}
});
graph.data(data);
graph.render();
}
}