antvG6 流程图效果展示

antvG6 流程图

准备工作

如果你已经安装步骤完成相关安装，可直接创建页面复制代码
也可可直接下载我的demo

demo地址：vue-antvg6地址

vue-antvg6简易包

git clone https://gitee.com/shuaizi010/vue-antvg6.git
cd 项目目录
npm install

我是用panjiachen的vue-admin-tempalte，来做例子的框架，在上面做示例页面

1 安装vue-admin-template

git clone https://github.com/PanJiaChen/vue-admin-template.git

2进入目录 安装所需包

cd vue-admin-template 
npm install

3 安装必备库，antv/g6，insert-css

npm install @antv/g6 --save
npm install insert-css

4新建页面配置路由

在src/router/index.js加入自己定义的路由

{
    path: '/g6dagre',
    component: Layout,
    redirect: '/g6dagre/index2',
    children: [{
      path: 'index2',
      name: 'G6dagre',
      component: () => import('@/views/g6dagre/index2'),
      meta: { title: 'G6dagre', icon: 'dashboard' }
    }]
  },

5流程图页面代码

参考地址

antvG6 Dagre 流程图

主页面代码

<template>
  <el-row :gutter="10" class="container">
    <el-col :span="2">
      <el-button type="" @click="downloadImage">导出</el-button>
    </el-col>
    <el-col :span="24">
      <div class="whr100" id="dataDiv"></div>
    </el-col>
  </el-row>
</template>
<script>
import G6 from "@antv/g6";
import insertCss from "insert-css";
insertCss(`
  .g6-tooltip {
    max-width: 600px;
    max-height: 500px;
    overflow-y: auto;
    position: absolute;
    left: -150px;
    z-index: 5;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    font-size: 14px;
    color: #545454;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px 20px;
    box-shadow: rgb(174, 174, 174) 0px 0px 10px;
    text-align: justify;
    text-justify: newspaper;
    word-break: break-all;
  }
  .tooltip-header{
    font-size:16px;
  }
`);
var graph = {};
//根据节点状态颜色
const dataTypeColor = {
  100: "#EEBC20",
  200: "#5BD8A6",
  300: "#F46649",
};
export default {
  name: "g6dagre",
  data() {
    return {
      dagreData: [],
    };
  },
  created() {
    //获取json数据
    this.dagreData = require("@/assets/dagreData2.json");

    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    init() {
      // 节点重定义
      G6.registerNode(
        "flow",
        {
          drawShape(cfg, group) {
            const rect = group.addShape("rect", {
              attrs: {
                x: -75,
                y: -25,
                width: 150,
                height: 50,
                radius: 5,
                stroke: "#5B8FF9",
                fill: dataTypeColor[cfg.dataType],
                lineWidth: 3,
              },
              name: "rect-shape",
            });
            if (cfg.name) {
              group.addShape("text", {
                attrs: {
                  text: cfg.name,
                  x: 0,
                  y: 0,
                  fill: "#00287E",
                  fontSize: 14,
                  textAlign: "center",
                  textBaseline: "middle",
                  fontWeight: "bold",
                },
                name: "text-shape",
              });
            }
            return rect;
          },
        },
        "single-node"
      );

      const container = document.getElementById("dataDiv");
      const width = container.scrollWidth;
      const height = container.scrollHeight || 900;
      graph = new G6.Graph({
        container: "dataDiv",
        width,
        height,
        defaultNode: {
          type: "flow",
        },
        defaultEdge: {
          type: "polyline",
          style: {
            radius: 5,
            endArrow: true,
            lineWidth: 2,
            stroke: "#C2C8D5",
          },
        },
        nodeStateStyles: {
          selected: {
            stroke: "#d9d9d9",
            fill: "#5394ef",
          },
        },
        modes: {
          default: [
            "drag-canvas",
            "zoom-canvas",
            "click-select",
            {
              type: "tooltip",
              formatText(model) {
                const cfg = model.conf;
                const text = [];
                cfg.forEach((row) => {
                  text.push(row.label + ":" + row.value + "<br>");
                });
                return text.join("\n");
              },
              offset: 10,
            },
          ],
        },
      });
      graph.read(this.dagreData);
      graph.fitView();

      if (typeof window !== "undefined")
        window.onresize = () => {
          if (!graph || graph.get("destroyed")) return;
          if (!container || !container.scrollWidth || !container.scrollHeight) return;
          graph.changeSize(container.scrollWidth, container.scrollHeight);
        };
    },
    downloadImage() {
      graph.downloadFullImage(Math.random().toString(16));
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.whr100 {
  height: 100%;
  width: 100%;
  position: relative;
}
</style>

6数据json代码

{
  "nodes": [
    {
      "id": "1",
      "dataType": "100",
      "name": "生产部门",
      "x": -300,
      "y": 200,
      "conf": [
        {
          "label": "生产入库",
          "value": "111"
        }
      ]
    },
    {
      "id": "2",
      "dataType": "200",
      "name": "入库",
      "x": 0,
      "y": 200,
      "conf": [
        {
          "label": "进入库房",
          "value": "222"
        }
      ]
    },
    {
      "id": "3",
      "dataType": "300",
      "name": "入库单",
      "x": 300,
      "y": 200,
      "conf": [
        {
          "label": "入库信息录入系统",
          "value": "333"
        }
      ]
    },
    {
      "id": "4",
      "dataType": "100",
      "name": "检验员",
      "x": 600,
      "y": 200,
      "conf": [
        {
          "label": "收到产品和入库单",
          "value": "444"
        }
      ]
    },
    {
      "id": "6",
      "dataType": "200",
      "name": "质检",
      "x": 900,
      "y": 200,
      "anchorPoints": [
        [
          0.5,
          0
        ],
        [
          0.5,
          0.5
        ]
      ],
      "conf": [
        {
          "label": "质量检测",
          "value": "666"
        }
      ]
    },
    {
      "id": "5",
      "dataType": "300",
      "name": "不合格入库单",
      "x": -300,
      "y": 0,
      "conf": [
        {
          "label": "返回入库员",
          "value": "555"
        }
      ]
    },
    {
      "id": "7",
      "dataType": "100",
      "name": "保管员",
      "x": 900,
      "y": 400,
      "conf": [
        {
          "label": "核对产品",
          "value": "777"
        }
      ]
    },
    {
      "id": "8",
      "dataType": "200",
      "name": "登记入库",
      "x": 600,
      "y": 400,
      "conf": [
        {
          "label": "登记入库产品",
          "value": "888"
        }
      ]
    },
    {
      "id": "9",
      "dataType": "300",
      "name": "库存账目系统",
      "x": 300,
      "y": 400,
      "conf": [
        {
          "label": "库存汇总",
          "value": "999"
        }
      ]
    },
    {
      "id": "10",
      "dataType": "100",
      "name": "统计员",
      "x": -300,
      "y": 400,
      "conf": [
        {
          "label": "统计出入库存",
          "value": "101010"
        }
      ]
    },
    {
      "id": "11",
      "dataType": "200",
      "name": "日数据报表",
      "x": 0,
      "y": 400,
      "conf": [
        {
          "label": "系统报表",
          "value": "111111"
        }
      ]
    },
    {
      "id": "12",
      "dataType": "200",
      "name": "统计月报表",
      "x": 300,
      "y": 600,
      "conf": [
        {
          "label": "系统生成",
          "value": "121212"
        }
      ]
    },
    {
      "id": "13",
      "dataType": "100",
      "name": "主管部门",
      "x": 300,
      "y": 800,
      "conf": [
        {
          "label": "汇总分析上报",
          "value": "131313"
        }
      ]
    }
  ],
  "edges": [
    {
      "source": "1",
      "target": "2"
    },
    {
      "source": "5",
      "target": "1"
    },
    {
      "source": "2",
      "target": "3"
    },
    {
      "source": "3",
      "target": "4"
    },
    {
      "source": "4",
      "target": "6"
    },
    {
      "source": "6",
      "target": "5"
    },
    {
      "source": "6",
      "target": "7"
    },
    {
      "source": "7",
      "target": "8"
    },
    {
      "source": "8",
      "target": "9"
    },
    {
      "source": "10",
      "target": "11"
    },
    {
      "source": "11",
      "target": "9"
    },
    {
      "source": "13",
      "target": "12"
    },
    {
      "source": "12",
      "target": "9"
    }
  ]
}