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

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

AntV X6 组织结构图 自定义节点 dagre 布局 图形库
关键词由CSDN通过智能技术生成

 引入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 Node配置参考
ywyanimate的博客
05-24 8129
Node 阅读时间约 14 分钟 Node 是所有节点的基类，继承自Cell，并定义了节点的通用属性和方法。 constructor constructor(metadata?: Node.Metadata) 其中Node.Metadata是创建节点的选项，除了从 Cell继承的markup、attrs、zIndex等选项外，还支持以下选项。 选项 类型 默认值 必选 描述 size { width: number; height: number ...
使用antv X6绘制拓扑关系图（层次布局）
GodV_666的博客
12-27 2449
antv x6 绘制层次拓扑图
探索高效图形编辑：antv-x6-vue 开源项目推荐
最新发布
gitblog_00253的博客
09-14 326
探索高效图形编辑：antv-x6-vue 开源项目推荐 antv-x6-vue the vue toolkit for graph analysis based on x6 项目地址: https://gitcode.com/gh...
【vue2+antvx6】节点大小不一致，点击按钮流程图自动布局
Qxn530的博客
04-23 1890
节点大小不一致，点击按钮流程图自动布局
vue antvG6 绘制组织架构图
qq_20111965的博客
03-23 5417
效果展示 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
基于antv/x6 创建组织结构图
ScriptEcho的博客
07-22 814
markup: [// ...],attrs: {// ...},},true,该代码注册了一个名为 “org-node” 的自定义节点形状，并指定了节点的宽高、标记和属性。attrs: {line: {// ...},},},true,该代码注册了一个名为 “org-edge” 的自定义边形状，并指定了边的样式属性，如颜色、宽度和圆角。深入了解了 X6 库的节点和边自定义机制。掌握了组织结构图的布局和连接方式。添加节点拖拽功能，方便用户调整组织结构。
基于antv x6流程自定义设计并自适应排版
琳小的博客
04-28 3048
其中排版的要点是：
Antv-X6动态渲染流程图布局问题
weixin_68729379的博客
09-01 4683
antv-x6流程图渲染位置布局
vue +antvX6 根据节点与线，动态设置节点坐标生成流程图
xuelong的博客
04-22 1380
vue2 + antvX6完成流程图，但只有节点与线，没有节点的坐标，需要根据节点的顺序显示流程图。
Vue+Antv X6绘制流程图demo
07-05
在Vue项目中使用AntV X6组件库绘制流程图，需要实现以下需求： 需求1：左侧菜单中的模块可以拖拽进入画布中生成对应的流程图模块 需求2：流程图中的节点之间可以进行连线交互 需求3：点击对应的节点后可以进行操作...
vue3+antv x6+tsx 制作自定义流程图
09-23
在本文中，我们将深入探讨如何使用Vue3、AntV X6和TSX技术栈来创建一个自定义的流程图。这个项目旨在利用这些强大的工具，提供一个可扩展且用户友好的流程图编辑环境。 首先，Vue3是Vue.js框架的最新版本，它引入了...
antv/x6封装vue2.0源码
05-13
“vue-x6-flow-master” 文件夹中包含的源码展示了如何在 Vue 项目中引入和使用 AntV X6。主要文件可能包括 `main.js`（入口文件，配置 Vue 应用和 X6）、`App.vue`（应用的根组件，包含图形编辑器的基本结构）以及...
基于Vue3+ts+element-plus+AntV X6实现的流程图编辑器源码
11-02
在本项目中，"基于Vue3+ts+element-plus+AntV X6实现的流程图编辑器源码"，开发者采用了一系列现代前端技术构建了一个功能丰富的流程图编辑工具。让我们详细了解一下这些关键技术及其在项目中的应用。 首先，Vue3是...
antV X6 修改组织架构图
zxl_start的博客
06-16 906
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
Vue2.0+AntvX6
qq_40287084的博客
03-02 5797
Vue2.0+AntvX6
基于antv x6实现的组织架构图
极简
07-04 717
基于x6实现的组织架构图
使用Vue+Antv-X6实现一个输送线可视化编辑器（支持拖拽、自定义连线、自定义节点等）
廖子默
06-20 1703
使用Vue2+Antv-X6去实现一个类似流程编辑器的小东西，X6做的真不错，推荐大家使用
Vue使用AntV X6绘制流程图（组态呈现）
热门推荐
m0_51431448的博客
10-16 2万+
先说下我项目中的需求，就是要自己绘制出一个我们想要的图，组态化呈现出来，然后这个图中会有很多节点，每个节点都会有自己的状态，状态会实时改变，状态变化的时候，对应的节点标签颜色等都要跟随变化。 那么我们该用什么绘制呢，绘制出来还要符合我们的业务需求，说白了就是要很灵活，想改什么，想用什么节点（自定义图片等），想绑定什么属性等等，我们都可以很灵活的实现。所以就基于AntV X6 来实现这么个事儿。
在 Vue3 中使用 AntV X6
kiku
02-21 9216
在 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
vue2项目,使用antv x6绘制树形流程图示例
11-03
Vue是一种流行的JavaScript框架，Vue 2是其第二个版本。AntV X6是一个基于Vue 2的图表绘制库，可以用于绘制各种类型的图表，包括树形流程图。 要在Vue 2项目中使用AntV X6绘制树形流程图，首先需要安装和引入AntV X6库。可以通过npm或yarn进行安装： npm install @antv/x6 或者 yarn add @antv/x6 然后，可以在Vue的组件中使用AntV X6。首先，引入`Graph`和`Node`组件： import { Graph, Node } from '@antv/x6-vue' 接下来，在Vue的模板中添加一个`Graph`组件，并设置一些必要的属性： ``` <template> <div> <Graph :initConfig="graphConfig"> <Node :shape="nodeShape" :x="nodeX" :y="nodeY" :width="nodeWidth" :height="nodeHeight" /> </Graph> </div> </template> <script> export default { data() { return { graphConfig: { width: 800, height: 600, gridSize: 10, background: { color: '#f8f8f8' }, scroller: { enabled: true, pannable: true } }, nodeShape: 'rect', nodeX: 100, nodeY: 100, nodeWidth: 80, nodeHeight: 40 } } } </script> ``` 在上面的代码中，创建了一个Graph组件和一个Node组件。Graph组件定义了整个绘图区域的配置，例如大小、网格和背景颜色等。Node组件定义了一个矩形节点的形状、位置和尺寸。 通过设置Node组件的属性，可以绘制更多的节点，并使用适当的形状、位置和尺寸。 以上是一个简单的示例，展示了如何在Vue 2项目中使用AntV X6绘制树形流程图。通过修改组件属性，可以创建更复杂的图表，并通过AntV X6的其他功能来增强图表的交互性和可视化效果。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值