企业级开发中，开箱即用的VUE流程图开发组件 AntV G6

已于 2022-10-10 12:01:58 修改
阅读量5.4k 收藏 21
点赞数 1
分类专栏： html5 js vue 文章标签： 流程图
于 2022-10-10 12:01:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010818438/article/details/127241686
版权
vue 同时被 3 个专栏收录
2 篇文章 0 订阅
订阅专栏
html5
1 篇文章 0 订阅
订阅专栏
js
1 篇文章 0 订阅
订阅专栏

什么是 AntV G6 ?

企业级应用开发往往需要使用流程图组件，AntV G6就是一款可以开箱即用的由蚂蚁金服提供的，全新一代数据可视化解决方案，是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight

 G6 可以做什么 ？

 上面这些关系图都是它可以轻松搞定的，我们可以通过他快速创建出自己的图分析和编辑引用

如何快速使用G6呢

第一步: 使用命令行在项目目录下执行以下命令：

npm install --save @antv/g6

第二步：在需要的位置引用它

import G6 from '@antv/g6';

 第三步：在引用页面制造容器

<div id="container" style="width:100%;height:500px;"></div>

第四步：在data数据中 ，创建适用的流程图数据

data:  {
    nodeExtraAttrs: {
        begin: {
          fill: 'rgba(24, 144, 255, 0.1)',
          stroke: '#1890FF',
        },
        end: {
          fill: 'rgba(242, 65, 48, 0.1)',
          stroke: '#F24130',
        },
        ORIGINAL: {
          fill: 'rgba(38, 191, 89, 0.1)',
          stroke: '#26BF59',
        },
      },
        nodes: [
           {
            id: 'node1',
            label: 'node1',
            text: null,
            key: 'ORIGINAL',
           
          },
          {
            id: 'node2',
            label: 'node2',
            text: null,
            key: 'begin',
           
          },
          {
            id: 'node3',
            label: 'node3',
            text: 'node3',
            key: 'ORIGINAL',
          },
           {
            id: 'node4',
            label: 'node4',
            text: 'node4',
            key: 'begin',
          },
          {
            id: 'node5',
            label: 'node5',
            text: 'node5',
            key: 'ORIGINAL',
          },
           {
            id: 'node6',
            label: 'node6',
            text: 'node6',
            key: 'end',
          },
          {
            id: 'node7',
            label: 'node7',
            text: 'node7',
            key: 'end',
          },
           {
            id: 'node8',
            label: 'node8',
            text: 'node8',
            key: 'begin',
          },
          {
            id: 'node9',
            label: 'node9',
            text: 'node9',
            key: 'ORIGINAL',
          },
          {
            id: 'node10',
            label: 'node10',
            text: 'node10',
            key: 'begin',
          },
        ],
        edges: [
          {
            source: 'node1',
            target: 'node2',
          },
          {
            source: 'node2',
            target: 'node3',
          },
          {
            source: 'node3',
            target: 'node4',
          },
          {
            source: 'node4',
            target: 'node5',
          },
          {
            source: 'node5',
            target: 'node6',
          },
          {
            source: 'node6',
            target: 'node7',
          },
          {
            source: 'node6',
            target: 'node8',
          },
          {
            source: 'node7',
            target: 'node9',
          },
          {
            source: 'node8',
            target: 'node9',
          },
          {
            source: 'node9',
            target: 'node10',
          },
        ],
      }

第五步：具体实现画流程图的方法 

drawView() {
      // 重写方法
      const _extends =
        Object.assign ||
        function (target) {
          for (let i = 1; i < arguments.length; i++) {
            const source = arguments[i];
            for (const key in source) {
              if (Object.prototype.hasOwnProperty.call(source, key)) {
                target[key] = source[key];
              }
            }
          }
          return target;
        };
      // 自定义节点   内置节点无法满足需求
      // G6.registerNode(typeName: string, nodeDefinition: object, extendedTypeName?: string)
      G6.registerNode(
         // 该新节点类型名称
        'node', 
        // 该新节点类型的定义
        // 当有 extendedTypeName （第三个参数）时，没被复写的函数将会继承 extendedTypeName 的定义
        {
          // cfg  节点身上所有的配置：包括label，size，x，y坐标等 

          // 这个方法，每渲染一个节点，执行一次
          drawShape: (cfg, group) => {
          
            // if(cfg.key==="ORIGINAL")  圆形

            //圆形
            if(cfg.key==="ORIGINAL") {
              // ctg上的id key label 都可以决定当前节点的类型
              cfg.size = (cfg.label.length / 10) * 130;
              let widthX = 2;
              

              const rect = group.addShape('ellipse', {
                attrs: _extends(
                  {
                    x: -widthX / 2,
                    y: 0,
                    rx: 60,
                    ry: 40,
                    fill: 'blue',
                  },
                  this.nodeExtraAttrs[cfg.key]
                ),
              });
              return rect;
            }else{

              // ctg上的id key label 都可以决定当前节点的类型
              cfg.size = (cfg.label.length / 10) * 130;
              let widthX = 0;
              if (cfg.label.length / 10 < 1) {
                widthX = 120;
              } else {
                widthX = cfg.size;
              }

               const rect = group.addShape('rect', {
                attrs: _extends(
                  {
                    x: -widthX / 2,
                    y: -25,
                    width: widthX,
                    height: 50,
                    radius: 4,
                    fill: '#FFD591',
                    fillOpacity: 1,
                  },
                  // 相当于：
                  // ORIGINAL: {
                  //   fill: 'rgba(38, 191, 89, 0.1)',
                  //   stroke: '#26BF59',
                  // },

                  // 属性为fill 和 stroke的对象
                  this.nodeExtraAttrs[cfg.key]
                ),
              });
              return rect;
            }
           
            
          },
          /**
           * 获取锚点（相关边的连入点）
           * @param  {Object} cfg 节点的配置项
           * @return {Array|null} 锚点（相关边的连入点）的数组,如果为 null，则没有控制点
           */
          // 自定义锚点
          getAnchorPoints: () => {
            return [
              [0, 0.5], // 左侧中间
              [1, 0.5], // 右侧中间
            ];
          },
        },
        // 被继承的节点类型，可以是内置节点类型名，也可以是其他自定义节点的类型名。
        // extendedTypeName 未指定时代表不继承其他类型的节点；
        // 例如基类 'single-node'，或 'circle', 'rect' 等
        'single-shape'
      );
      /**
       * 自定义带箭头的贝塞尔曲线 edge
       */
      G6.registerEdge('line-with-arrow', {
        itemType: 'edge',
        draw: (cfg, group) => {
          const startPoint = cfg.startPoint;
          const endPoint = cfg.endPoint;
          const centerPoint = {
            x: (startPoint.x + endPoint.x) / 2,
            y: (startPoint.y + endPoint.y) / 2,
          };
          // 控制点坐标
          const controlPoint = {
            x: (startPoint.x + centerPoint.x) / 2,
            y: startPoint.y,
          };
          // 为了更好的展示效果, 对称贝塞尔曲线需要连到箭头根部
          const path = group.addShape('path', {
            attrs: {
              path: [
                ['M', startPoint.x, startPoint.y],
                ['Q', controlPoint.x, controlPoint.y, centerPoint.x, centerPoint.y],
                ['T', endPoint.x, endPoint.y],
                ['L', endPoint.x, endPoint.y],
              ],
              stroke: '#ccc',
              lineWidth: 1.6,
              endArrow: {
                path: 'M 4,0 L -4,-4 L -4,4 Z',
                d: 4,
              },
            },
          });
          return path;
        },
      });
      const graph = new G6.Graph({
        // 常用配置项 
        // 类型：Boolean；默认：'false'。图是否自适应画布。
        fitView: true,
        // 类型：Number | Array；默认：0。图自适应画布时的四周留白像素值。fitView 为 true 时生效。
        // fitViewPadding : 0
        // 类型：Boolean；默认：'false'。是否平移图使其中心对齐到画布中心。v3.5.1 后支持。
        fitCenter: true,
        // bloodView：流程图容器id
        container: 'container',
        //modes 交互行为相关
        // 配置多种交互模式及其包含的交互事件的。
        modes: {
          default: [
            'drag-canvas',
            // 'zoom-canvas', 缩放
            {
              type: 'tooltip',
              formatText(model) {
                const cfg = model.text;
                const text = model.text;
                // cfg.forEach((row) => {
                //   text.push(row.label + ':' + row.value + '<br>');
                // });
                return text;
              },
              offset: 30,
            },
          ],
        },
        // 若数据中不存在节点位置，则默认为随机布局。配置布局类型及其参数。
        layout: {
          // 类型  总共三种：径向：radial   有向分层：dagre     力导：force
          type: 'dagre',
          // 'LR'：从左至右布局；
          rankdir: 'LR', // 可选可选值：'TB' | 'BT' | 'LR' | 'RL'，默认为图的中心 TB
        },
        // defaultNode类型：Object。默认情况下全局节点的配置项，包括样式属性和其他属性
        // G6 的内置节点包括 
        // circle圆形，rect长方形，ellipse椭圆，diamond菱形，triangle三角形，
        // star五角星，image图片，modelRect卡片，donut圆形（v4.2.5 起支持）。
        defaultNode: {
          type: 'node',  // 这里的type指向自定义节点
          // size:300,
          labelCfg: {
            style: {
              fill: '#595959',
              fontSize: 14,
            },
          },
        },
        // defaultEdge  类型：Object。默认情况下全局边的配置项，包括样式属性和其他属性
        defaultEdge: {
          type: 'line-with-arrow',
          style: {
            endArrow: true,
            lineWidth: 2,
            stroke: '#ccc',
          },
        },
      });


      this.data.edges.forEach((item, index) => {
        if (item.upstreamKey === 'WORK') {
          item.labelCfg = {
            autoRotate: true,
            style: {
              fill: '#262626', //  文字颜色
              fontSize: 10,
              cursor: 'pointer',
              background: {
                fill: 'rgba(38, 191, 89, 0.1)',
                stroke: '#26BF59',
                padding: [4.5, 16.5, 4.5, 16.5],
                radius: 2,
              },
            },
          };
        } else if (item.upstreamKey === 'ORIGINAL') {
          item.labelCfg = {
            autoRotate: true,
            style: {
              fill: '#262626', //  文字颜色
              fontSize: 10,
              cursor: 'pointer',
              background: {
                fill: 'rgba(255, 167, 64, 0.1)',
                stroke: '#FFA740',
                padding: [4.5, 16.5, 4.5, 16.5],
                radius: 2,
              },
            },
          };
        } else if (item.upstreamKey === 'FINAL') {
          item.labelCfg = {
            autoRotate: true,
            style: {
              fill: '#262626', //  文字颜色
              fontSize: 10,
              cursor: 'pointer',
              background: {
                fill: 'rgba(24, 144, 255, 0.1)',
                stroke: '#1890FF',
                padding: [4.5, 16.5, 4.5, 16.5],
                radius: 2,
              },
            },
          };
        }
      });

       // 单击节点
      graph.on('node:click', (e) => {
        const nodeItem = e.item // 获取被点击的节点元素对象
        console.log(nodeItem._cfg)
      })
       // 鼠标进入节点
      graph.on('node:mouseenter', (e) => {
        const nodeItem = e.item // 获取鼠标进入的节点元素对象
        console.log('鼠标移入', nodeItem._cfg)
      })
      // 双击节点
      graph.on('node:dblclick', (e) => {
        const nodeItem = e.item // 获取被点击的节点元素对象
        console.log('双击', nodeItem._cfg)
      })

      graph.data(this.data);
      // 渲染
      graph.render();
    },

第六步：在需要调用的地方进行引用

this.$nextTick(() => {
   this.drawView()
});

 第七步：完整代码如下

        实现效果如下：

<template>
  <div>
    <div id="container" style="width:100%;height:500px;"></div>
  </div>
</template>

<script>
import G6 from '@antv/g6';
export default {

  components: {
  },
  props: {
    // 是否显示
    page: {
      type: String,
      default: null
    }
  },
  setup() {

  },
  data() {
    return {
      url: null,
      // 保存自定义节点的数据  
      // 一般实际开发中，流程图节点样式都是在自定义的
      nodeExtraAttrs: {
        begin: {
          fill: 'rgba(24, 144, 255, 0.1)',
          stroke: '#1890FF',
        },
        end: {
          fill: 'rgba(242, 65, 48, 0.1)',
          stroke: '#F24130',
        },
        ORIGINAL: {
          fill: 'rgba(38, 191, 89, 0.1)',
          stroke: '#26BF59',
        },
      },
      data:  {
        nodes: [
           {
            id: 'node1',
            label: 'node1',
            text: null,
            key: 'ORIGINAL',
           
          },
          {
            id: 'node2',
            label: 'node2',
            text: null,
            key: 'begin',
           
          },
          {
            id: 'node3',
            label: 'node3',
            text: 'node3',
            key: 'ORIGINAL',
          },
           {
            id: 'node4',
            label: 'node4',
            text: 'node4',
            key: 'begin',
          },
          {
            id: 'node5',
            label: 'node5',
            text: 'node5',
            key: 'ORIGINAL',
          },
           {
            id: 'node6',
            label: 'node6',
            text: 'node6',
            key: 'end',
          },
          {
            id: 'node7',
            label: 'node7',
            text: 'node7',
            key: 'end',
          },
           {
            id: 'node8',
            label: 'node8',
            text: 'node8',
            key: 'begin',
          },
          {
            id: 'node9',
            label: 'node9',
            text: 'node9',
            key: 'ORIGINAL',
          },
          {
            id: 'node10',
            label: 'node10',
            text: 'node10',
            key: 'begin',
          },
        ],
        edges: [
          {
            source: 'node1',
            target: 'node2',
          },
          {
            source: 'node2',
            target: 'node3',
          },
          {
            source: 'node3',
            target: 'node4',
          },
          {
            source: 'node4',
            target: 'node5',
          },
          {
            source: 'node5',
            target: 'node6',
          },
          {
            source: 'node6',
            target: 'node7',
          },
          {
            source: 'node6',
            target: 'node8',
          },
          {
            source: 'node7',
            target: 'node9',
          },
          {
            source: 'node8',
            target: 'node9',
          },
          {
            source: 'node9',
            target: 'node10',
          },
        ],
      }
    }
  },
  watch: {
    page: {
      handler(val, oldV) {
        this.url = val
        switch (val) {
          case '物料工程':
            this.url = '/diagram/wuliaogongcheng.html'
            break
          default :
            console.log('step other')
        }
      },
      immediate: true
    }
  },
  created() {
    
  },
  mounted() {
    this.$nextTick(() => {
      this.drawView();
    });
  },
  methods: {
    drawView() {
      // 重写方法
      const _extends =
        Object.assign ||
        function (target) {
          for (let i = 1; i < arguments.length; i++) {
            const source = arguments[i];
            for (const key in source) {
              if (Object.prototype.hasOwnProperty.call(source, key)) {
                target[key] = source[key];
              }
            }
          }
          return target;
        };
      // 自定义节点   内置节点无法满足需求
      // G6.registerNode(typeName: string, nodeDefinition: object, extendedTypeName?: string)
      G6.registerNode(
         // 该新节点类型名称
        'node', 
        // 该新节点类型的定义
        // 当有 extendedTypeName （第三个参数）时，没被复写的函数将会继承 extendedTypeName 的定义
        {
          // cfg  节点身上所有的配置：包括label，size，x，y坐标等 

          // 这个方法，每渲染一个节点，执行一次
          drawShape: (cfg, group) => {
          
            // if(cfg.key==="ORIGINAL")  圆形

            //圆形
            if(cfg.key==="ORIGINAL") {
              // ctg上的id key label 都可以决定当前节点的类型
              cfg.size = (cfg.label.length / 10) * 130;
              let widthX = 2;
              

              const rect = group.addShape('ellipse', {
                attrs: _extends(
                  {
                    x: -widthX / 2,
                    y: 0,
                    rx: 60,
                    ry: 40,
                    fill: 'blue',
                  },
                  this.nodeExtraAttrs[cfg.key]
                ),
              });
              return rect;
            }else{

              // ctg上的id key label 都可以决定当前节点的类型
              cfg.size = (cfg.label.length / 10) * 130;
              let widthX = 0;
              if (cfg.label.length / 10 < 1) {
                widthX = 120;
              } else {
                widthX = cfg.size;
              }

               const rect = group.addShape('rect', {
                attrs: _extends(
                  {
                    x: -widthX / 2,
                    y: -25,
                    width: widthX,
                    height: 50,
                    radius: 4,
                    fill: '#FFD591',
                    fillOpacity: 1,
                  },
                  // 相当于：
                  // ORIGINAL: {
                  //   fill: 'rgba(38, 191, 89, 0.1)',
                  //   stroke: '#26BF59',
                  // },

                  // 属性为fill 和 stroke的对象
                  this.nodeExtraAttrs[cfg.key]
                ),
              });
              return rect;
            }
           
            
          },
          /**
           * 获取锚点（相关边的连入点）
           * @param  {Object} cfg 节点的配置项
           * @return {Array|null} 锚点（相关边的连入点）的数组,如果为 null，则没有控制点
           */
          // 自定义锚点
          getAnchorPoints: () => {
            return [
              [0, 0.5], // 左侧中间
              [1, 0.5], // 右侧中间
            ];
          },
        },
        // 被继承的节点类型，可以是内置节点类型名，也可以是其他自定义节点的类型名。
        // extendedTypeName 未指定时代表不继承其他类型的节点；
        // 例如基类 'single-node'，或 'circle', 'rect' 等
        'single-shape'
      );
      /**
       * 自定义带箭头的贝塞尔曲线 edge
       */
      G6.registerEdge('line-with-arrow', {
        itemType: 'edge',
        draw: (cfg, group) => {
          const startPoint = cfg.startPoint;
          const endPoint = cfg.endPoint;
          const centerPoint = {
            x: (startPoint.x + endPoint.x) / 2,
            y: (startPoint.y + endPoint.y) / 2,
          };
          // 控制点坐标
          const controlPoint = {
            x: (startPoint.x + centerPoint.x) / 2,
            y: startPoint.y,
          };
          // 为了更好的展示效果, 对称贝塞尔曲线需要连到箭头根部
          const path = group.addShape('path', {
            attrs: {
              path: [
                ['M', startPoint.x, startPoint.y],
                ['Q', controlPoint.x, controlPoint.y, centerPoint.x, centerPoint.y],
                ['T', endPoint.x, endPoint.y],
                ['L', endPoint.x, endPoint.y],
              ],
              stroke: '#ccc',
              lineWidth: 1.6,
              endArrow: {
                path: 'M 4,0 L -4,-4 L -4,4 Z',
                d: 4,
              },
            },
          });
          return path;
        },
      });
      const graph = new G6.Graph({
        // 常用配置项 
        // 类型：Boolean；默认：'false'。图是否自适应画布。
        fitView: true,
        // 类型：Number | Array；默认：0。图自适应画布时的四周留白像素值。fitView 为 true 时生效。
        // fitViewPadding : 0
        // 类型：Boolean；默认：'false'。是否平移图使其中心对齐到画布中心。v3.5.1 后支持。
        fitCenter: true,
        // bloodView：流程图容器id
        container: 'container',
        //modes 交互行为相关
        // 配置多种交互模式及其包含的交互事件的。
        modes: {
          default: [
            'drag-canvas',
            // 'zoom-canvas', 缩放
            {
              type: 'tooltip',
              formatText(model) {
                const cfg = model.text;
                const text = model.text;
                // cfg.forEach((row) => {
                //   text.push(row.label + ':' + row.value + '<br>');
                // });
                return text;
              },
              offset: 30,
            },
          ],
        },
        // 若数据中不存在节点位置，则默认为随机布局。配置布局类型及其参数。
        layout: {
          // 类型  总共三种：径向：radial   有向分层：dagre     力导：force
          type: 'dagre',
          // 'LR'：从左至右布局；
          rankdir: 'LR', // 可选可选值：'TB' | 'BT' | 'LR' | 'RL'，默认为图的中心 TB
        },
        // defaultNode类型：Object。默认情况下全局节点的配置项，包括样式属性和其他属性
        // G6 的内置节点包括 
        // circle圆形，rect长方形，ellipse椭圆，diamond菱形，triangle三角形，
        // star五角星，image图片，modelRect卡片，donut圆形（v4.2.5 起支持）。
        defaultNode: {
          type: 'node',  // 这里的type指向自定义节点
          // size:300,
          labelCfg: {
            style: {
              fill: '#595959',
              fontSize: 14,
            },
          },
        },
        // defaultEdge  类型：Object。默认情况下全局边的配置项，包括样式属性和其他属性
        defaultEdge: {
          type: 'line-with-arrow',
          style: {
            endArrow: true,
            lineWidth: 2,
            stroke: '#ccc',
          },
        },
      });


      this.data.edges.forEach((item, index) => {
        if (item.upstreamKey === 'WORK') {
          item.labelCfg = {
            autoRotate: true,
            style: {
              fill: '#262626', //  文字颜色
              fontSize: 10,
              cursor: 'pointer',
              background: {
                fill: 'rgba(38, 191, 89, 0.1)',
                stroke: '#26BF59',
                padding: [4.5, 16.5, 4.5, 16.5],
                radius: 2,
              },
            },
          };
        } else if (item.upstreamKey === 'ORIGINAL') {
          item.labelCfg = {
            autoRotate: true,
            style: {
              fill: '#262626', //  文字颜色
              fontSize: 10,
              cursor: 'pointer',
              background: {
                fill: 'rgba(255, 167, 64, 0.1)',
                stroke: '#FFA740',
                padding: [4.5, 16.5, 4.5, 16.5],
                radius: 2,
              },
            },
          };
        } else if (item.upstreamKey === 'FINAL') {
          item.labelCfg = {
            autoRotate: true,
            style: {
              fill: '#262626', //  文字颜色
              fontSize: 10,
              cursor: 'pointer',
              background: {
                fill: 'rgba(24, 144, 255, 0.1)',
                stroke: '#1890FF',
                padding: [4.5, 16.5, 4.5, 16.5],
                radius: 2,
              },
            },
          };
        }
      });

       // 单击节点
      graph.on('node:click', (e) => {
        const nodeItem = e.item // 获取被点击的节点元素对象
        console.log(nodeItem._cfg)
      })
       // 鼠标进入节点
      graph.on('node:mouseenter', (e) => {
        const nodeItem = e.item // 获取鼠标进入的节点元素对象
        console.log('鼠标移入', nodeItem._cfg)
      })
      // 双击节点
      graph.on('node:dblclick', (e) => {
        const nodeItem = e.item // 获取被点击的节点元素对象
        console.log('双击', nodeItem._cfg)
      })

      graph.data(this.data);
      // 渲染
      graph.render();
    },
  }

}
</script>
Ciel bleu V5
关注
专栏目录
antV G6中以html为节点的自动分层布局数据可视化详解
weixin_34310127的博客
01-19 4509
2019独角兽企业重金招聘Python工程师标准>>> ...
vue-super-flow:基于Vue的流程图组件。vue流程图
04-13
vue-super-flow A flowchart editor component base on Vue. Vue flowchart. Vue 流程图。 Installation npm install vue-super-flow yarn add vue-super-flow import SuperFlow from 'vue-super-flow' import 'vue-super-flow/lib/index.css' Vue.use(SuperFlow) Attributes 属性 类型 默认值 描述 draggable Boolean true 是否开启节点拖拽 linkAddable Boolean true 是否开启快捷创建 link linkEditable Boolean true link 是否可编辑 hasMarkLine Boolean true 是否
vue 流程图组件
小夏的博客
06-15 4402
vue 流程图组件 下载引入，可直接使用 <super-flow :node-list="" :link-list="" >
Vue3 流程图组件库 ：Vue Flow
最新发布
cnzzs的博客
09-24 2135
Vue Flow 是一个轻量级的 Vue 3 组件库，它允许开发者以简洁直观的方式创建动态流程图。本篇文章记录一下Vue Flow的基本用法安装登录后复制 npm add @vue-flow/core1.流程图的构成Nodes、Edges、Handles主题默认样式通过导入样式文件应用登录后复制 /* these ar...
在vue中实现流程图
热门推荐
weixin_48447589的博客
07-07 1万+
当然这是我的练习，方便大家观看，如果有什么问题可以私信我。之后就是对 其中的方法进行调用即可，废话不多说，直接上代码。第一步：需要一个flow.js作为依据，可自取。之后再你的组件中将这个文件引入，
vue绘制流程图的插件 flowchart-vue
SmallGirlYang的博客
11-13 9086
记录一个vue可以绘制流程图的插件 flowchart-vue。
流程图-vue-Vue.js的流程图和流程图设计器组件。-Vue.js开发
05-27
流程图Vue.js的流程图和流程图设计器组件。 英文| 用法纱线添加流程图-vue 添加Del编辑
@antv.zip@antv.zip
06-08
总的来说，AntV 是前端开发者构建数据可视化应用的得力工具，它的出现极大地简化了数据可视化的开发流程，提升了开发效率，推动了数据驱动的前端开发模式的发展。无论是在企业内部的BI系统，还是在互联网产品中，...
Web的图形可视化：G6库的设计与实现
2021年10月24日收到2021年12月7日收到修订版2021年12月7日接受2021年12月11日在线提供保留字：Graph基于Web的可视化a b st ra ct由于其高要求，创作图可视化给开发人员带来了巨大的挑战领域知识和开发技能。...
从入门到进阶，web前端技术不断迭代，我们如何突破？
在线学习web前端开发教程
01-15 755
整个业界在前端框架不断迭代中，也寻找到了许多突破方向，例如跨平台中的 RN、Flutter，服务端 GraphQL、Serverless，前端和客户端的融合越来越紧密，前端在 Node 和 Electron 的加持下，也扩展了自己的版图到服务端和桌面。 同时，随着前端开发越来越复杂，整个前端研发也经历了人工化 ->工具化 ->工程化 ->智能化的演变。目前各个大厂在工程化实践不断...
flowchart-vue:Vue.js的流程图和设计器组件
05-05
流程图 Vue.js的流程图和流程图设计器组件（React.js的）。 English | 用法 yarn add flowchart-vue < template> < div xss=removed> < button type = " button " @ click = " $refs . chart . add ({id : + new Date (), x : 10 , y : 10 , name : ' New ' , type : ' operation ' , approvers : []}) " > Add </ button > < button type = " button " @ click = " $refs . chart . remove () " >
vue+element工作流程图
05-12
仿钉钉工作流的流程图树，可无限添加审批人和条件，可根据条件自动计算进入那一条流程。vue+element纯前端代码手写，可以结合自定义表单组合任意工作流。
web前端技术不断迭代，我们如何突破？
在线学习web前端开发教程
12-30 1303
进入 2019 年，大前端技术生态似乎进入到了一个相对稳定的环境，React 在 2013 年发布至今已经 6 年时间了，Vue 1.0 在 2015 年发布，至今也有 4 年时间了。 整个业界在前端框架不断迭代中，也寻找到了许多突破方向，例如跨平台中的 RN、Flutter，服务端 GraphQL、Serverless，前端和客户端的融合越来越紧密，前端在 Node 和 Electron 的加持...
强力推荐：Vue Flow - 极致的可视化流程图组件
gitblog_00046的博客
08-09 1547
强力推荐：Vue Flow - 极致的可视化流程图组件 项目地址:https://gitcode.com/gh_mirrors/vu/vue-flow 项目介绍 在图形界面设计和信息展示领域中，一款优质且易用的流线图组件无疑能带来事半功倍的效果。今天，我要向大家隆重推介的是—Vue Flow，一款基于Vue 3构建的高度可定制化流线图组件库。 Vue Flow不仅拥有简洁明了的操作界面，更提供了...
vue 流程图
qq_23109373的博客
05-06 6122
仿工作配置流程图
vueFlow 流程图组件
StevenYanghahha的博客
04-24 2943
vue实现流程图
流程图-Vue组件库：基于Vue的优雅流程图解决方案
gitblog_00965的博客
08-21 623
流程图-Vue组件库：基于Vue的优雅流程图解决方案 项目地址:https://gitcode.com/gh_mirrors/fl/flowchart-vue 项目介绍 Flowchart-Vue 是一个专为Vue框架设计的高效、灵活的流程图绘制组件。此项目灵感来源于简化开发者在Vue应用中集成流程图的需求，提供了丰富的API和直观的配置选项，使得创建和管理复杂或简单的流程图变得轻而易举。它利用了...
vue中使用AntV G6编写树形结构图并实现节点增删改
蜗牛~~
01-29 1万+
效果图： 先在vue项目中安装antv G6 npm install --save @antv/g6 安装完之后引入，我是将整个结构图的某些相关配置进行了封装，写在了公共js文件里面，若是你们不想封装可以直接在你们相关的vue文件里面引入 import G6 from '@antv/g6'; 然后封装名称为renderMap的函数，名字可以自定义 export function renderMap(data,graph){ const COLLAPSE_ICON = func...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值