轻松搭建流程图！Vue+AntV G6+Element-UI详细教程

前端

2023-07-23 17:26:30

轻松搭建令人惊叹的流程图：Vue、AntV G6 和 Element-UI 教程

在当今快节奏的商业环境中，清晰有效地传达复杂工作流程至关重要。流程图在可视化流程、步骤和决策方面发挥着至关重要的作用，帮助利益相关者快速理解和协作。

使用 Vue、AntV G6 和 Element-UI 构建流程图

借助 Vue、AntV G6 和 Element-UI，您可以轻松创建交互式、可定制的流程图，使您的工作流程展示引人入胜且易于理解。

准备工作

Node.js >= 8.10.0
Vue CLI >= 3.0
AntV G6 >= 3.0
Element-UI >= 2.0

创建项目

使用 Vue CLI 创建一个新的 Vue 项目：

vue create my-flowchart

安装依赖

在项目目录中，安装 AntV G6 和 Element-UI：

npm install antv-g6 element-ui --save

创建组件

创建一个 Vue 组件 Flowchart.vue 来渲染流程图：

<template>
  <div>
    <el-row>
      <el-col :span="12">
        <g6-graph :data="data" :layout="layout" :fitView="fitView" :modes="modes" @node-click="handleNodeClick" @edge-click="handleEdgeClick"></g6-graph>
      </el-col>
      <el-col :span="12">
        <el-form :model="form">
          <!-- 表单字段 -->
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 导入组件和数据
import G6 from 'antv/g6';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

export default {
  // 组件配置
  components: {
    G6Graph: G6.Graph
  },
  data() {
    // 初始化流程图数据
    return {
      data: {
        nodes: [],
        edges: []
      },
      // 布局配置
      layout: {
        type: 'force'
      },
      fitView: true,
      modes: ['default', 'edit'],
      // 表单数据
      form: {
        nodeName: '',
        nodeType: 'rect',
        nodeStyle: '#fff',
        edgeName: '',
        edgeType: 'line',
        edgeStyle: '#000'
      }
    };
  },
  methods: {
    // 事件处理函数
    handleNodeClick(e) {
      console.log(e);
    },
    handleEdgeClick(e) {
      console.log(e);
    },
    // 添加节点
    handleAddNode() {
      // 从表单获取数据
      const { nodes, nodeName, nodeType, nodeStyle } = this.data;
      // 生成新的节点 ID
      const id = `node${nodes.length + 1}`;
      // 创建新的节点数据
      nodes.push({
        id,
        label: nodeName,
        x: 200,
        y: 200,
        type: nodeType,
        style: {
          fill: nodeStyle
        }
      });
      // 重置表单数据
      this.form.nodeName = '';
      this.form.nodeType = 'rect';
      this.form.nodeStyle = '#fff';
    },
    // 添加边线
    handleAddEdge() {
      // 从表单获取数据
      const { edges, edgeName, edgeType, edgeStyle } = this.data;
      // 生成新的边线 ID
      const id = `edge${edges.length + 1}`;
      // 创建新的边线数据
      edges.push({
        id,
        label: edgeName,
        source: 'node1',
        target: 'node2',
        type: edgeType,
        style: {
          stroke: edgeStyle
        }
      });
      // 重置表单数据
      this.form.edgeName = '';
      this.form.edgeType = 'line';
      this.form.edgeStyle = '#000';
    }
  },
  created() {
    // 注册自定义节点形状
    G6.registerNode('rect', {
      drawShape(cfg, group) {
        // 创建矩形形状
        const rect = group.addShape('rect', {
          attrs: {
            x: -cfg.size[0] / 2,
            y: -cfg.size[1] / 2,
            width: cfg.size[0],
            height: cfg.size[1],
            fill: cfg.style.fill,
            stroke: cfg.style.stroke
          }
        });
        return rect;
      }
    });
  }
};
</script>