vue使用Antv x6 组织架构图（自动布局）

最新推荐文章于 2025-03-26 09:08:46 发布
最新推荐文章于 2025-03-26 09:08:46 发布
阅读量9.1k 收藏 15
点赞数 9
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/love_weiai/article/details/119572428
版权

 引入x6

npm install @antv/x6 --save
<template>
    <div id="layoutContainer" style='width: 100%;height: 800px;'></div>
</template>

<script>
    // Cell, Node,
    import {Graph, Color, Dom} from '@antv/x6'
    import dagre from 'dagre'

    // 自定义节点
    Graph.registerNode('org-node', {
            width: 260,
            height: 88,
            markup: [
                {
                    tagName: 'rect',
                    attrs: {
                        class: 'card'
                    }
                },
                {
                    tagName: 'image',
                    attrs: {
                        class: 'image'
                    }
                },
                {
                    tagName: 'text',
                    attrs: {
                        class: 'rank'
                    }
                },
                {
                    tagName: 'text',
                    attrs: {
                        class: 'name'
                    }
                },
                //增加刪除
                // {
                //     tagName: 'g',
                //     attrs: {
                //         class: 'btn add'
                //     },
                //     children: [
                //         {
                //             tagName: 'circle',
                //             attrs: {
                //                 class: 'add'
                //             }
                //         },
                //         {
                //             tagName: 'text',
                //             attrs: {
                //                 class: 'add'
                //             }
                //         }
                //     ]
                // },
                // {
                //     tagName: 'g',
                //     attrs: {
                //         class: 'btn del'
                //     },
                //     children: [
                //         {
                //             tagName: 'circle',
                //             attrs: {
                //                 class: 'del'
                //             }
                //         },
                //         {
                //             tagName: 'text',
                //             attrs: {
                //                 class: 'del'
                //             }
                //         }
                //     ]
                // }
            ],
            attrs: {
                '.card': {
                    rx: 10,
                    ry: 10,
                    refWidth: '100%',
                    refHeight: '100%',
                    fill: '#FFF',
                    stroke: '#000',
                    strokeWidth: 0,
                    pointerEvents: 'visiblePainted'
                },
                '.image': {
                    x: 16,
                    y: 16,
                    width: 56,
                    height: 56,
                    opacity: 0.7
                },
                '.rank': {
                    refX: 0.95,
                    refY: 0.5,
                    fontFamily: 'Courier New',
                    fontSize: 13,
                    textAnchor: 'end',
                    textVerticalAnchor: 'middle'
                },
                '.name': {
                    refX: 0.95,
                    refY: 0.7,
                    fontFamily: 'Arial',
                    fontSize: 14,
                    fontWeight: '600',
                    textAnchor: 'end'
                },
                '.btn.add': {
                    refDx: -16,
                    refY: 16,
                    event: 'node:add'
                },
                '.btn.del': {
                    refDx: -44,
                    refY: 16,
                    event: 'node:delete'
                },
                '.btn > circle': {
                    r: 10,
                    fill: 'transparent',
                    stroke: '#333',
                    strokeWidth: 1
                },
                '.btn.add > text': {
                    fontSize: 20,
                    fontWeight: 800,
                    stroke: '#000',
                    x: -5.5,
                    y: 7,
                    fontFamily: 'Times New Roman',
                    text: '+'
                },
                '.btn.del > text': {
                    fontSize: 28,
                    fontWeight: 500,
                    stroke: '#000',
                    x: -4.5,
                    y: 6,
                    fontFamily: 'Times New Roman',
                    text: '-'
                }
            }
        },
        true
    )

    // 自定义边
    Graph.registerEdge(
        'org-edge',
        {
            zIndex: -1,
            attrs: {
                line: {
                    stroke: '#585858',
                    strokeWidth: 3,
                    sourceMarker: null,
                    targetMarker: null
                }
            }
        },
        true
    )

    const male = 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*kUy8SrEDp6YAAAAAAAAAAAAAARQnAQ'
    const female = 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*f6hhT75YjkIAAAAAAAAAAAAAARQnAQ'
    // 布局方向
    const dir = 'LR' // LR RL TB BT

    export default {
        name: 'index',

        data() {
            return {
                visible: false,
                graph: '',
                datalist: [],
                list: [],
                list2: []
            }
        },

        mounted() {
            this.zzManageThreeList();
            // await this.showDrawer();
        },

        methods: {
            async zzManageThreeList() {
                await this.$api.zzManageThreeList().then(res => {
                    this.datalist = res.data.data;
                    this.list = [];
                    this.readNodes(this.datalist)
                })
                await this.showDrawer();
            },
            readNodes(nodes = [], biao = '') {
                for (let item of nodes) {
                    this.list.push({
                        name: item.name,
                        sort: item.sort,
                        biao: biao
                    })
                    if (item.children && item.children.length) {
                        this.readNodes(item.children, item.name)
                    }
                }
            },
            showDrawer() {
                this.initGraph()
                this.visible = true
            },

            initGraph() {
                // 创建画布
                this.graph = new Graph({
                    container: document.getElementById('layoutContainer'),
                    // width: 100%,
                    // height: 800,
                    grid: true,
                    scroller: true,
                    snapline: true,
                    interacting: false,
                    //縮放
                    mousewheel: {
                        enabled: true,
                        modifiers: ['ctrl', 'meta'],
                    },
                });
                var nodes = [
                    // this.createNode('Founder & Chairman', 'Pierre Omidyar', male, '#31d0c6'),
                    // this.createNode('President & CEO', 'Margaret C. Whitman', female, '#31d0c6'),
                    // this.createNode('President, PayPal', 'Scott Thompson', male, '#7c68fc'),
                    // this.createNode('President, Ebay Global Marketplaces', 'Devin Wenig', male, '#7c68fc'),
                    // this.createNode('Senior Vice President Human Resources', 'Jeffrey S. Skoll', male, '#fe854f'),
                    // this.createNode('Senior Vice President Controller', 'Steven P. Westly', male, '#feb663')
                ]
                // nodes.push(this.createNode(this.datalist[0].sort, this.datalist[0].name, male, '#31d0c6'))
                for (let i = 0; i < this.list.length; i++) {
                    nodes.push(this.createNode(this.list[i].sort, this.list[i].name, male, '#31d0c6',this.list[i].biao))
                }
                this.list2=[...this.list]
                const edges = [
                    // this.createEdge(nodes[0], nodes[1]),
                    // this.createEdge(nodes[0], nodes[3]),
                    // this.createEdge(nodes[1], nodes[2]),
                    // // this.createEdge(nodes[1], nodes[3]),
                    // this.createEdge(nodes[1], nodes[4]),
                    // this.createEdge(nodes[1], nodes[5])
                ]
                for (let i=0;i<this.list.length;i++){
                    for (let j=1;j<this.list2.length;j++) {
                        if (this.list[i].name==this.list2[j].biao) {
                            edges.push(this.createEdge(nodes[i], nodes[j]))
                        }
                    }
                }

                this.graph.resetCells([...nodes, ...edges])
                this.layout()
                this.graph.zoomTo(0.8)
                this.graph.centerContent()
                // this.setup()
            },

            // 监听自定义事件
            setup() {
                this.graph.on('node:add', ({e, node}) => {
                    e.stopPropagation()
                    const bg = Color.randomHex()
                    const member = this.createNode(
                        'Employee',
                        'New Employee',
                        Math.random() < 0.5 ? male : female,
                        bg,
                        Color.invert(bg, true)
                    )
                    this.graph.freeze()
                    this.graph.addCell([member, this.createEdge(node, member)])
                    this.layout()
                })

                this.graph.on('node:delete', ({e, node}) => {
                    e.stopPropagation()
                    this.graph.freeze()
                    this.graph.removeCell(node)
                    this.layout()
                })
            },
            // 自动布局
            layout() {
                const nodes = this.graph.getNodes()
                const edges = this.graph.getEdges()
                const g = new dagre.graphlib.Graph()
                g.setGraph({rankdir: dir, nodesep: 16, ranksep: 16})
                g.setDefaultEdgeLabel(() => ({}))

                const width = 260
                const height = 90
                nodes.forEach((node) => {
                    g.setNode(node.id, {width, height})
                })

                edges.forEach((edge) => {
                    const source = edge.getSource()
                    const target = edge.getTarget()
                    g.setEdge(source.cell, target.cell)
                })

                dagre.layout(g)

                this.graph.freeze()

                g.nodes().forEach((id) => {
                    const node = this.graph.getCell(id)
                    if (node) {
                        const pos = g.node(id)
                        node.position(pos.x, pos.y)
                    }
                })

                edges.forEach((edge) => {
                    const source = edge.getSourceNode()
                    const target = edge.getTargetNode()
                    const sourceBBox = source.getBBox()
                    const targetBBox = target.getBBox()

                    // console.log(sourceBBox, targetBBox)

                    if ((dir === 'LR' || dir === 'RL') && sourceBBox.y !== targetBBox.y) {
                        const gap =
                            dir === 'LR'
                                ? targetBBox.x - sourceBBox.x - sourceBBox.width
                                : -sourceBBox.x + targetBBox.x + targetBBox.width
                        const fix = dir === 'LR' ? sourceBBox.width : 0
                        const x = sourceBBox.x + fix + gap / 2
                        edge.setVertices([
                            {x, y: sourceBBox.center.y},
                            {x, y: targetBBox.center.y}
                        ])
                    } else if (
                        (dir === 'TB' || dir === 'BT') &&
                        sourceBBox.x !== targetBBox.x
                    ) {
                        const gap =
                            dir === 'TB'
                                ? targetBBox.y - sourceBBox.y - sourceBBox.height
                                : -sourceBBox.y + targetBBox.y + targetBBox.height
                        const fix = dir === 'TB' ? sourceBBox.height : 0
                        const y = sourceBBox.y + fix + gap / 2
                        edge.setVertices([
                            {x: sourceBBox.center.x, y},
                            {x: targetBBox.center.x, y}
                        ])
                    } else {
                        edge.setVertices([])
                    }
                })

                this.graph.unfreeze()
            },

            createNode(rank, name, image, background) {
                const textColor = '#000';
                return this.graph.createNode({
                    shape: 'org-node',
                    attrs: {
                        '.card': {fill: background},
                        '.image': {xlinkHref: image},
                        '.rank': {
                            fill: textColor,
                            text: Dom.breakText(rank, {width: 160, height: 45})
                        },
                        '.name': {
                            fill: textColor,
                            text: Dom.breakText(name, {width: 160, height: 45})
                        },
                        '.btn > circle': {stroke: textColor},
                        '.btn > text': {fill: textColor, stroke: textColor}
                    }
                })
            },
            createEdge(source, target) {
                return this.graph.createEdge({
                    shape: 'org-edge',
                    source: {cell: source.id},
                    target: {cell: target.id}
                })
            }
        }
    }
</script>

<style scoped>

</style>

久爱@勿忘
关注
基于antv x6流程自定义设计并自适应排版
琳小的博客
04-28 3402
其中排版的要点是：
【vue2+antvx6】节点大小不一致，点击按钮流程图自动布局
Qxn530的博客
04-23 2630
节点大小不一致，点击按钮流程图自动布局
antv-x6实现拖拽图形连线，并一键布局
最新发布
weixin_46861111的博客
03-26 433
【代码】antv-x6实现拖拽图形连线，并一键布局。
基于antv/x6 创建组织结构图
ScriptEcho的博客
07-22 960
markup: [// ...],attrs: {// ...},},true,该代码注册了一个名为 “org-node” 的自定义节点形状，并指定了节点的宽高、标记和属性。attrs: {line: {// ...},},},true,该代码注册了一个名为 “org-edge” 的自定义边形状，并指定了边的样式属性，如颜色、宽度和圆角。深入了解了 X6 库的节点和边自定义机制。掌握了组织结构图的布局和连接方式。添加节点拖拽功能，方便用户调整组织结构。
基于antv x6实现的组织架构图
极简
07-04 979
基于x6实现的组织架构图
使用antv X6绘制拓扑关系图（层次布局）
GodV_666的博客
12-27 3162
antv x6 绘制层次拓扑图
antV X6 修改组织架构图
zxl_start的博客
06-16 989
1.安装依赖 npm install @antv/x6 --save 2.在import { Graph, Node, Point } from '@antv/x6' 3.设置容器给出宽高 <div class="contain" id="dataContainer" style="width:1200px;height:800px"></div> 4.参考示例 https://x6.antv.vision/zh/examples/showcase/practices#or
vue antvG6 绘制组织架构图
qq_20111965的博客
03-23 5808
效果展示 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
vue中使用antv/g6 绘制关系图、结构图_高级图标绘制设计软件最新版 | MyDraw 4.1.2...
weixin_39631350的博客
10-26 1236
THE START更新高级图标绘制设计软件最新版，MyDraw 4.1.2。还有一些类似的软件Xmind、Xmind ZEN等，都可在小编的菜单栏找到。进入主题！MyDraw是先进的绘图软件和矢量图形绘图工具。使用此程序创建流程图，组织结构图，思维导图，网络图，平面图，UML图和常规业务图。MyDraw程序包含强大的功能，可帮助您处理流程图，组织结构图，思维导图，网络图，平面图，一般业务...
基于vue2.x+antdesign+antv x6实现的流程图编辑器.zip
03-09
在本项目中，开发者利用了Vue2.x框架、Ant Design Vue UI库以及AntV X6图形引擎，构建了一个功能丰富的流程图编辑器。这个编辑器允许用户创建、编辑和展示流程图，对于业务流程设计、系统架构规划等领域具有很高的...
Antv-X6动态渲染流程图布局问题
weixin_68729379的博客
09-01 4999
antv-x6流程图渲染位置布局
Vue+Antv X6绘制流程图demo
07-05
在Vue项目中使用AntV X6组件库绘制流程图，需要实现以下需求： 需求1：左侧菜单中的模块可以拖拽进入画布中生成对应的流程图模块 需求2：流程图中的节点之间可以进行连线交互 需求3：点击对应的节点后可以进行操作节点（删除、查看节点的相关信息参数） 需求4：鼠标悬浮在连线上时可以删除当前连线 隐含需求：节点样式需要满足`UI`设计，所以需要自定义节点样式 一个满足以上需求的Vue+Antv X6的项目 具体效果如下： https://img-blog.csdnimg.cn/a24d2e30b5a0481297f83c5a75b78b4f.png#pic_center
vue +antvX6 根据节点与线，动态设置节点坐标生成流程图
xuelong的博客
04-22 2032
vue2 + antvX6完成流程图，但只有节点与线，没有节点的坐标，需要根据节点的顺序显示流程图。
Vue2.0+AntvX6
qq_40287084的博客
03-02 6197
Vue2.0+AntvX6
使用Vue+Antv-X6实现一个输送线可视化编辑器（支持拖拽、自定义连线、自定义节点等）
廖子默
06-20 2300
使用Vue2+Antv-X6去实现一个类似流程编辑器的小东西，X6做的真不错，推荐大家使用
Vue使用AntV X6绘制流程图（组态呈现）
热门推荐
m0_51431448的博客
10-16 2万+
先说下我项目中的需求，就是要自己绘制出一个我们想要的图，组态化呈现出来，然后这个图中会有很多节点，每个节点都会有自己的状态，状态会实时改变，状态变化的时候，对应的节点标签颜色等都要跟随变化。 那么我们该用什么绘制呢，绘制出来还要符合我们的业务需求，说白了就是要很灵活，想改什么，想用什么节点（自定义图片等），想绑定什么属性等等，我们都可以很灵活的实现。所以就基于AntV X6 来实现这么个事儿。
在 Vue3 中使用 AntV X6
kiku
02-21 9610
在 Vue3 中使用 AntV X6 <script setup lang="ts"> import { onMounted, ref } from 'vue' import { Graph } from '@antv/x6'; import { GridLayout, DagreLayout } from '@antv/layout' // 布局算法 import { data } from '../mock/data' let container: HTMLElement | und
vue项目中使用antvX6新手教程，附demo案例讲解（可拖拽流程图、网络拓扑图）
wzy_PROTEIN的博客
02-28 1万+
用户可以自己拖拽节点，节点之间可以随意连线，保存拓扑图数据后传给后端，然后在另一个页面拿到之前的数据进行渲染展示。
VUE+antv/x6实现拖拽自定义流程图 X6FlowChart
qq_32396313的博客
12-24 7597
基于vue2.0与X6开发的流程图,开箱即用
Execution failed for task ':app:shrinkReleaseRes'.
01-11
### 构建任务失败解决方案 当遇到 `Execution failed for task ':app:shrinkReleaseRes'` 错误时，这通常意味着资源压缩过程中出现了问题。此错误可能由多种原因引起，包括但不限于配置不正确、依赖冲突或特定于项目的其他因素。 #### 可能的原因分析 1. **ProGuard 或 R8 配置不当** ProGuard 和 R8 是用于优化和混淆代码以及减少 APK 大小的工具。如果这些工具的配置存在问题，可能会导致资源无法正常处理[^1]。 2. **重复资源** 如果项目中有多个模块定义了相同的资源名称，可能导致冲突并引发该错误。检查是否存在重名的 drawable、string 等资源文件[^2]。 3. **第三方库兼容性** 某些第三方库可能与当前使用的 Gradle 插件版本或其他库存在兼容性问题，从而影响到资源打包过程中的行为[^3]。 4. **Gradle 缓存问题** 有时旧缓存数据会干扰新编译的结果，尝试清理本地仓库和重新同步项目可以帮助排除此类潜在障碍[^4]。 #### 推荐的操作方法 为了有效解决问题，建议按照以下步骤逐一排查： ```bash # 清理项目构建目录 ./gradlew clean # 删除 .gradle 文件夹下的所有内容以清除缓存 rm -rf ~/.gradle/caches/ ``` 调整 `build.gradle` 中的相关设置也是一个重要环节： ```groovy android { ... buildTypes { release { minifyEnabled true // 是否启用代码缩减 shrinkResources true // 是否开启资源压缩 proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro' // 尝试禁用 shrinkResources 来测试是否为资源压缩引起的错误 // shrinkResources false } } } ``` 此外，在 `proguard-rules.pro` 文件内添加必要的保留规则，防止关键类被意外移除: ```text -keep class com.example.yourpackage.** { *; } # 替换为你自己的包路径 -dontwarn androidx.**,com.google.** # 忽略警告信息 ``` 最后，确保所使用的 Android Studio 版本是最新的稳定版，并且已经应用了所有的补丁更新。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值