Antv G6构建流程图(修正)

Antv G6构建流程图(修正)

1.在项目中进行引入G6

1.1使用CDN引入

<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-{$version}/build/g6.js"></script>

1.2在项目中使用 npm 包引入

Step 1: 使用命令行在项目目录下执行以下命令：

 npm install --save @antv/g6

Step 2: 在需要用的 G6 的 JS 文件中导入：

import G6 from '@antv/g6'

2.在组件中使用G6创建流程图

2.1 创建容器

需要在 HTML 中创建一个用于容纳 G6 绘制的图的容器，通常为 div 标签。G6 在绘制时会在该容器下追加 canvas 标签，然后将图绘制在其中，注意：选择器使用ID选择器。

<div id="container"></div>

2.2数据准备

引入 G6 的数据源为 JSON 格式的对象。该对象中需要有节点（nodes）和边（edges）字段，分别用数组表示。项目中节点（nodes）内有三大必需字段：
1.id：节点的唯一标识，用于边（edges）连接节点时使用。
2.lable:节点内文字展示内容，用于描绘节点。
3.type：此字段是与后端约定的自定义字段（非官方文档使用），在项目中对于获取来的节点数据进行遍历，根据type字段的值的不同，来赋予节点描述属性，用于绘制个性化节点，展示不同的图形，达到动态渲染效果。
（edges）字段，用于连接节点，连接方式是两两相连，数组形式，包含两个字段：
1.source：边的起点
2.target：边的终点
点和边的其他属性参见链接：

G6 的内置节点和边

const data = {
     
        // 点集
        nodes: [{
     
          id: 'node0',          // 元素的 id
          type: 'userTask-1',         // 元素的图形
          label: '未运行',       // 标签文字
          // x: 100,      // Number，可选，节点位置的 x 值
          // y: 200,       // Number，可选，节点位置的 y 值
        }, {
     
          id: 'node1', // String，该节点存在则必须，节点的唯一标识
          type: 'userTask-2',
          label: '运行',// 节点文本
          color: '#000',
        }, {
     
          id: 'node2', // String，该节点存在则必须，节点的唯一标识
          type: 'userTask-3',
          label: '挂起'// 节点文本
        }, {
     
          id: 'node3',
          type: 'userTask-7',
          label: '完成'// 节点文本
        }, {
     
          id: 'node4', // String，该节点存在则必须，节点的唯一标识
          type: 'userTask-8',
          label: '终止',// 节点文本
          anchorPoints: [
            [0.5, 0.5], [1, 0.5]
          ]
        }
        ],
        // 边集
        edges: [{
     // 表示一条从 node1 节点连接到 node2 节点的边
          source: 'node0', // String，必须，起始点 id
          target: 'node1',  // String，必须，目标点 id
        },
        {
     
          source: 'node1',
          target: 'node2',
        }, {
     
          source: 'node2',
          target: 'node3',
        }, {
     
          source: 'node3',
          target: 'node4',
        }]
      };

2.3进行节点遍历

如果节点数据中设置详细的节点属性（图形种类，文本颜色，文本位置，图形距离等等）也可以不必遍历数据，遍历数据主要功能：
1.解放后端，把绘制图形的详细属性通过遍历根据type字段不同来绘制所需图形前端实现，后端只需要提供type值就可以
2.便于增加其他功能（添加标注，根据数据多少调整画布内图形位置等等）
实例方法如下：

// 节点遍历，确定图形
    nodeEach(nodes) {
     
      nodes.forEach(node => {
     
        if (!node.style) {
     
          node.style = {
     }
        }
        switch (node.type) 
          // 1人工任务--未运行
          case 'userTask-1': {
     
            node.shape = 'rect'
            node.style = {
     
              stroke: '#E4E4E4',
              fill: '#CFCFCF',
              radius: 20
            }
            break
          }
          // 2人工任务--运行
          case 'userTask-2': {
     
            node.shape = 'rect'
            node.style = {
     
              stroke: '#409EFF',
              fill: '#409EFF',
              radius: 20
            }
            break
          }
          // 3人工任务--挂起
          case 'userTask-3': {
     
            node.shape = 'rect'
            node.style = {
     
              stroke: '#E6A23C',
              fill: '#E6A23C',
              radius: 20
            }
            break
          }
          // 4人工任务--完成
          case 'userTask-7': {
     
            node.shape = 'rect'
            node.style = {
     
              stroke: '#00CC00',
              fill: '#00CC00',
              radius: 20
            }
            break
          }
          // 5人工任务--终止
          case 'userTask-8': {
     
            node.shape = 'rect'
            node.style = {
     
              stroke: '#F56C6C',
              fill: '#F56C6C',
              radius: 20
            }
            break
          }
        }
      })
    }

2.4创建关系图

创建关系图（实例化）时，至少需要为图设置容器、宽和高：

 const nodes = this.drawData.nodes
      this.nodeEach(nodes)
      const width = document.getElementById('container').scrollWidth
      const height = document.getElementById('container').scrollHeight || 500
const graph = new G6.Graph({
     
        container: 'container',//容器id
        width: width,//宽
        height: height,//高
        fitView: true,//是否自适应画布
        fitViewPadding: [50, 50, 50, 50],//画布四周的留白
        layout: {
     //布局类型选择
          type: 'dagre',
          rankdir: 'LR'
        },
        defaultNode: {
     //设置默认节点属性,当type值在遍历方法里面没有的时候,就会展示默认节点属性的图形
          size: [260, 160],
          shape: 'rect',
          labelCfg: {
     
            style: {
     
              fill: '#fff',
              fontSize: 32
            },
            position: 'center'
          },
          style: {
     
            lineWidth: 10,
            stroke: '#00CC00', // 图形边框色
            fill: '#00CC00' // 图形填充色
          }
        },
        defaultEdge: {
     //默认边的属性设置,
          shape: 'cubic-horizontal',
          size: 3,
          style: {
     
            stroke: '#000',
            endArrow: {
     //设置箭头
              path: 'M 10,0 L -10,-10 L -10,10 Z', // 自定义箭头为中心点在(0, 0)，指向 x 轴正方向的path
              d: 10
            }
          }
        }
      })

2.5配置数据源，渲染

graph.data(data);  // 读取 Step 2 中的数据源到图上
graph.render();    // 渲染图

3.效果图