1安装

cnpm install --save @antv/g6@3.4.8

2、代码，简单使用

<template><div>3333<div id="mountNode"></div></div>
</template>
<script>
import G6 from '@antv/g6'
export default {data() {return {}},computed: {},mounted() {const css = {fill: '#fff',stroke: '#cbdaff',radius: 5,shadowColor: '#cbdaff',shadowBlur: 10,shadowOffsetX: 0,shadowOffsetY: 5,cursor: 'pointer',}// 定义流程图的数据,size: 50大小，shape图形样式（rect矩形）const data = {nodes: [{ id: 'node1', label: '开始', x: 100, y: 100,size: [100,50], shape: 'rect',style: css},{ id: 'node2', label: '步骤 1', x: 300, y: 100,size: [100,50], shape: 'rect',style: css },{ id: 'node3', label: '步骤 2', x: 300, y: 300,size: [100,50], shape: 'rect',style: css },{ id: 'node4', label: '结束', x: 500, y: 300,size: [100,50], shape: 'rect',style: css }],edges: [{ source: 'node1', target: 'node2' },{ source: 'node2', target: 'node3' },{ source: 'node3', target: 'node4' }]};// 创建 G6 图实例const graph = new G6.Graph({container: 'mountNode',width: 800,height: 600});// 向图中添加数据并渲染graph.data(data);graph.render();graph.on('click', (ev)=>{console.log(ev)});},methods: {}
};
</script>
<style></style>