vue2中实现Antv g6 流程图 以及自定义节点

在Vue 2中实现Antv G6流程图以及自定义节点，你需要按照以下步骤操作：

1. 安装G6依赖：

npm install @antv/g6 --save

2. 创建Vue组件，并在mounted生命周期中初始化G6流程图和自定义节点。

<template>
  <div ref="graphContainer"></div>
</template>
 
<script>
import G6 from '@antv/g6';
 
export default {
  name: 'G6Flow',
  mounted() {
    const graph = new G6.Graph({
      container: this.$refs.graphContainer,
      width: 800,
      height: 600,
      defaultNode: {
        type: 'circle',
        // 自定义样式
        style: {
          fill: '#steelblue',
          stroke: '#eaff8f',
          lineWidth: 5,
        },
      },
      defaultEdge: {
        type: 'cubic-horizontal',
      },
    });
 
    const data = {
      nodes: [
        {
          id: 'node1',
          x: 100,
          y: 100,
        },
        {
          id: 'node2',
          x: 200,
          y: 100,
        },
      ],
      edges: [
        {
          source: 'node1',
          target: 'node2',
        },
      ],
    };
 
    graph.data(data);
    graph.render();
  },
};
</script>
 
<style>
/* 确保流程图容器正确显示 */
#graphContainer {
  width: 100%;
  height: 100%;
}
</style>

在这个例子中，我们创建了一个简单的Vue组件，它在mounted钩子中初始化了G6流程图，并设置了一个带有两个节点和一个边的简单数据集。你可以根据需要自定义节点和边的样式，并添加更复杂的交互逻辑。