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.效果图

Antv G6构建流程图(修正)_第1张图片

你可能感兴趣的:(vue,javascript)