vue2项目中使用 Graph F6 绘制 Dagre 流程图？

【官网地址：快速上手 | F6】

1、安装：

npm install --save @antv/f6

 2、引入：

import F6 from '@antv/f6';

3、 使用：

①创建关系图的容器；

②数据准备；

③创建关系图；

④配置数据源、渲染。

示例：

首先，准备一个id为mountNode的容器用来放置流程图：

<template>
  <div>
    <div id="mountNode"></div>
  </div>
</template>

在js中引入要用到的插件及布局：

// 引入插件配置
import F6 from '@antv/f6';

// 引入层次布局
import dagreLayout from '@antv/f6/dist/extends/layout/dagreLayout.js';

在这里，我用到的是自定义布局和节点，在created生命周期中绘制好自定义布局、自定义节点.我这里用到的例子是流程图，需要使用层次布局，与引入的布局相关联：

created() {
  // 自定义一个层次布局
  F6.registerLayout('dagre', dagreLayout);
  // 自定义node节点
  this.customNode()
}

自定义节点是该示例是通过使用svg标签重新绘制的节点样式 ，以免混淆，在这里需要声明一下：（箭头函数内部的svg标签是我这个例子使用到的节点样式，若要修改节点样式，在箭头函数后面根据自己的需求绘制即可），重点是绘制自定义节点要使用 F6.registerNode：

customNode () {
  F6.registerNode(
    'dom-node',
    (cfg) => `
      <group>
        <rect style={{
          width: 50,
          height: 50,
          stroke: ${ cfg.isAlarm ? '#f76e6f' : '#4f55e7' },
          fill: ${ cfg.isAlarm ? '#f76e6f66' : '#4f55e766' },
          radius: 25
        }}>
          <image style={{
            img: '${this.iconsFun(cfg)}',
            width: 30,
            height: 30,
            marginTop: 8,
            marginLeft: 10
          }} />
        </rect>
        <text style={{ fill: #000, fontSize: 12, textAlign: 'center', marginLeft: 14, marginTop: 2 }}>${cfg.name || '暂无'}</text>
        <rect style={{
          width: 100,
          height: 25,
          marginLeft: -30,
          marginTop: 5,
          stroke: ${ cfg.isAlarm ? '#f76e6f' : '#4f55e7' },
          fill: ${ cfg.isAlarm ? '#f76e6f66' : '#4f55e766' }
        }}>
          <text style={{ fill: ${ cfg.isAlarm ? '#f76e6f' : '#4f55e7' }, fontSize: 12, textAlign: 'center', marginLeft: 20, marginTop: 2 }}>${cfg.systemName || '暂无'}</text>
        </rect>
      </group>
    `,
  );
}

准备好了容器、自定义的布局和节点，下面需要做的就是拿到数据源，我这里使用的是流程图，数据是由两个数组组成，第一个数组由每项节点组成的node数组，第二个数组由每对节点之间的关系组成的edge数组（若要绘制的是其他种类的拓扑图，可以到官网寻找自己需要的示例），流程图的数据源大致为以下结构：

// 节点
nodes: [
    {
      id: '1',
      dataType: 'alps',
      name: 'alps_file1',
      conf: [
        {
          label: 'conf',
          value: 'pai_graph.conf',
        },
        {
          label: 'dot',
          value: 'pai_graph.dot',
        },
        {
          label: 'init',
          value: 'init.rc',
        },
      ],
    },
    {
      id: '2',
      dataType: 'alps',
      name: 'alps_file2',
      conf: [
        {
          label: 'conf',
          value: 'pai_graph.conf',
        },
        {
          label: 'dot',
          value: 'pai_graph.dot',
        },
        {
          label: 'init',
          value: 'init.rc',
        },
      ],
    },
    {
      id: '3',
      dataType: 'alps',
      name: 'alps_file3',
      conf: [
        {
          label: 'conf',
          value: 'pai_graph.conf',
        },
        {
          label: 'dot',
          value: 'pai_graph.dot',
        },
        {
          label: 'init',
          value: 'init.rc',
        },
      ],
    },
    {
      id: '4',
      dataType: 'sql',
      name: 'sql_file1',
      conf: [
        {
          label: 'conf',
          value: 'pai_graph.conf',
        },
        {
          label: 'dot',
          value: 'pai_graph.dot',
        },
        {
          label: 'init',
          value: 'init.rc',
        },
      ],
    },
    {
      id: '5',
      dataType: 'sql',
      name: 'sql_file2',
      conf: [
        {
          label: 'conf',
          value: 'pai_graph.conf',
        },
        {
          label: 'dot',
          value: 'pai_graph.dot',
        },
        {
          label: 'init',
          value: 'init.rc',
        },
      ],
    },
    {
      id: '6',
      dataType: 'feature_etl',
      name: 'feature_etl_1',
      conf: [
        {
          label: 'conf',
          value: 'pai_graph.conf',
        },
        {
          label: 'dot',
          value: 'pai_graph.dot',
        },
        {
          label: 'init',
          value: 'init.rc',
        },
      ],
    },
    {
      id: '7',
      dataType: 'feature_etl',
      name: 'feature_etl_1',
      conf: [
        {
          label: 'conf',
          value: 'pai_graph.conf',
        },
        {
          label: 'dot',
          value: 'pai_graph.dot',
        },
        {
          label: 'init',
          value: 'init.rc',
        },
      ],
    },
    {
      id: '8',
      dataType: 'feature_extractor',
      name: 'feature_extractor',
      conf: [
        {
          label: 'conf',
          value: 'pai_graph.conf',
        },
        {
          label: 'dot',
          value: 'pai_graph.dot',
        },
        {
          label: 'init',
          value: 'init.rc',
        },
      ],
    },
  ],
// 边
  edges: [
    {
      source: '1',
      target: '2',
    },
    {
      source: '1',
      target: '3',
    },
    {
      source: '2',
      target: '4',
    },
    {
      source: '3',
      target: '4',
    },
    {
      source: '4',
      target: '5',
    },
    {
      source: '5',
      target: '6',
    },
    {
      source: '6',
      target: '7',
    },
    {
      source: '6',
      target: '8',
    },
  ]

数据源准备好后，就要开始配置图层、渲染实例啦，该步骤包含三部分：创建图层实例、实例关联数据、渲染实例。关于实例的配置，可以查看F6官网：图配置 F6.Graph(cfg) | F6，根据自己的需求进行使用：

// 创建图层实例、实例关联数据、渲染实例
init(data) {
  let node = document.getElementById('mountNode')
  // 创建一个图层实例
  const graph = new F6.Graph({
    container: node, // 图的 DOM 容器，可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象。
    width: screen.width, // Number，必须，指定画布宽度，单位为 'px'，默认为画布容器宽度。
    height: screen.height, // Number，必须，指定画布高度，单位为 'px'，默认为画布容器高度。
    fitView: true, //是否开启画布自适应。开启后图自动适配画布大小
    // fitViewPadding: 20, // fitView 为 true 时生效，图适应画布时，指定四周的留白。
    minZoom: 0.1, // 最小缩放比例。
    maxZoom: 3, // 最大缩放比例。
    // 布局配置项
    layout: {
      type: 'dagre',
      controlPoints: true,
    },
    // 设置画布的交互模式。
    modes: {
      default: ['drag-canvas', 'zoom-canvas', 'click-select'],
    },
    // 默认状态下节点的配置，会被写入的 data 覆盖。
    defaultNode: {
      type: 'dom-node'
    },
  });
  // 修改边的配置
  graph.edge(edge => {
    if (edge.bothAlarm) {
      return {
        style: {
          stroke: '#f87c7d'
        }
      }
    } else {
      return {
        style: {
          stroke: '#4f55e7'
        }
      }
    }
  });
  graph.data(data); // 读取数据源到图上
  graph.render(); // 渲染图
}

至此， 绘制流程图（拓扑图）的工作已经结束，下面是我写的示例的效果图，看到本篇博客的友友们，可以根据自己的需求到官网上寻找示例进行模仿修改：

前端小白积累经验篇~