vue中使用antvG6实现自定义树形结构

已于 2022-11-16 16:02:05 修改
阅读量1.7k 收藏 1
点赞数
分类专栏： ❤️❤️--antV G6 文章标签： vue.js 前端 antvG6
于 2022-11-01 10:26:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41579104/article/details/127628854
版权

复制粘贴即可，记得先安装antv

npm install --save @antv/g6
<template>
    <div class="myDiv">
        <div id="mountNode"></div>
    </div>
</template>

<script>
import G6 from '@antv/g6';
export default {
    name: '',
    components: {},
    props: {},
    data() {
        return {
            data: {
                id: "111",//节点id
                x: 200,
                y: 100,
                shape: 'image',//节点显示的类型，可以是矩形rect等或者图片形式
                label: 'image',
                img: '../../../../static/img/mcenter.png',
                size: [100, 130],//节点大小
                "children": [
                    {
                        "id": "第二舰队",
                        img: '../../../../static/img/jd2.png',
                        size: [90, 60],
                        shape: 'image',
                        label: 'image',
                        "children": [
                            { shape: 'rect', size: [240, 30], "id": "21", shape: 'multipleLabelsNode', level: 3, label: ["node2", "人员"] },
                            { shape: 'rect', size: [240, 30], "id": "22", shape: 'multipleLabelsNode', level: 3, label: ["node2", "装备"] },
                            { shape: 'rect', size: [240, 30], "id": "23", shape: 'multipleLabelsNode', level: 3, label: ["node2", "基地"] },
                            { shape: 'rect', size: [240, 30], "id": "24", shape: 'multipleLabelsNode', level: 3, label: ["node2", "战争"] },
                            { shape: 'rect', size: [240, 30], "id": "25", shape: 'multipleLabelsNode', level: 3, label: ["node2", "该级战舰"] },
                        ]
                    },
                    {
                        "id": "第三舰队",
                        img: '../../../../static/img/jd3.png',
                        shape: 'image',
                        size: [90, 60],
                        "children": [
                            { shape: 'rect', size: [240, 30], "id": "31", shape: 'multipleLabelsNode', level: 3, label: ["node2", "人员"] },
                            { shape: 'rect', size: [240, 30], "id": "32", shape: 'multipleLabelsNode', level: 3, label: ["node2", "装备"] },
                            { shape: 'rect', size: [240, 30], "id": "33", shape: 'multipleLabelsNode', level: 3, label: ["node2", "基地"] },
                            { shape: 'rect', size: [240, 30], "id": "34", shape: 'multipleLabelsNode', level: 3, label: ["node2", "战争"] },
                            { shape: 'rect', size: [240, 30], "id": "35", shape: 'multipleLabelsNode', level: 3, label: ["node2...", "该级战舰"] },
                        ]
                    },
                    {
                        "id": "第四舰队",
                        img: '../../../../static/img/jd4.png',
                        shape: 'image',
                        size: [90, 60],
                        "children": [
                            { shape: 'rect', size: [240, 30], "id": "41", shape: 'multipleLabelsNode', level: 3, label: ["node2", "人员"] },
                            { shape: 'rect', size: [240, 30], "id": "42", shape: 'multipleLabelsNode', level: 3, label: ["node2", "装备"] },
                            { shape: 'rect', size: [240, 30], "id": "43", shape: 'multipleLabelsNode', level: 3, label: ["node2", "基地"] },
                            { shape: 'rect', size: [240, 30], "id": "44", shape: 'multipleLabelsNode', level: 3, label: ["node2", "战争"] },
                            { shape: 'rect', size: [240, 30], "id": "45", shape: 'multipleLabelsNode', level: 3, label: ["node2", "该级战舰"] },
                        ]
                    },
                    {
                        "id": "第五舰队",
                        img: '../../../../static/img/jd5.png',
                        shape: 'image',
                        size: [90, 60],
                        "children": [
                            { shape: 'rect', size: [240, 30], "id": "51", shape: 'multipleLabelsNode', level: 3, label: ["node2", "人员"] },
                            { shape: 'rect', size: [240, 30], "id": "52", shape: 'multipleLabelsNode', level: 3, label: ["node2", "装备"] },
                            { shape: 'rect', size: [240, 30], "id": "53", shape: 'multipleLabelsNode', level: 3, label: ["node2", "基地"] },
                            { shape: 'rect', size: [240, 30], "id": "54", shape: 'multipleLabelsNode', level: 3, label: ["node2", "战争"] },
                            { shape: 'rect', size: [240, 30], "id": "55", shape: 'multipleLabelsNode', level: 3, label: ["node2", "该级战舰"] },
                        ]
                    },
                    {
                        "id": "第六舰队",
                        img: '../../../../static/img/jd6.png',
                        shape: 'image',
                        size: [90, 60],
                        "children": [
                            { shape: 'rect', size: [240, 30], "id": "61", shape: 'multipleLabelsNode', level: 3, label: ["node2", "人员"] },
                            { shape: 'rect', size: [240, 30], "id": "62", shape: 'multipleLabelsNode', level: 3, label: ["node2", "装备"] },
                            { shape: 'rect', size: [240, 30], "id": "63", shape: 'multipleLabelsNode', level: 3, label: ["node2", "基地"] },
                            { shape: 'rect', size: [240, 30], "id": "64", shape: 'multipleLabelsNode', level: 3, label: ["node2", "战争"] },
                            { shape: 'rect', size: [240, 30], "id": "65", shape: 'multipleLabelsNode', level: 3, label: ["node2", "该级战舰"] },
                        ]
                    },
                    {
                        "id": "第七舰队",
                        img: '../../../../static/img/jd7.png',
                        shape: 'image',
                        size: [90, 60],
                        "children": [
                            { shape: 'rect', size: [240, 30], "id": "71", shape: 'multipleLabelsNode', level: 3, label: ["node2", "人员"] },
                            { shape: 'rect', size: [240, 30], "id": "72", shape: 'multipleLabelsNode', level: 3, label: ["node2", "装备"] },
                            { shape: 'rect', size: [240, 30], "id": "73", shape: 'multipleLabelsNode', level: 3, label: ["node2", "基地"] },
                            { shape: 'rect', size: [240, 30], "id": "74", shape: 'multipleLabelsNode', level: 3, label: ["node2", "战争"] },
                            { shape: 'rect', size: [240, 30], "id": "75", shape: 'multipleLabelsNode', level: 3, label: ["node2", "该级战舰"] },
                        ]
                    },
                    {
                        "id": "第十舰队",
                        img: '../../../../static/img/jd10.png',
                        shape: 'image',
                        size: [90, 60],
                        "children": [
                            { shape: 'rect', size: [240, 30], "id": "11", shape: 'multipleLabelsNode', level: 3, label: ["node2", "人员"] },
                            { shape: 'rect', size: [240, 30], "id": "12", shape: 'multipleLabelsNode', level: 3, label: ["node2", "装备"] },
                            { shape: 'rect', size: [240, 30], "id": "13", shape: 'multipleLabelsNode', level: 3, label: ["node2", "基地"] },
                            { shape: 'rect', size: [240, 30], "id": "14", shape: 'multipleLabelsNode', level: 3, label: ["node2", "战争"] },
                            { shape: 'rect', size: [240, 30], "id": "15", shape: 'multipleLabelsNode', level: 3, label: ["node2", "该级战舰"] },
                        ]
                    }
                ]
            },
            graph: {}

        }
    },
    watch: {},
    computed: {},
    methods: {
        render() {
            G6.registerNode("multipleLabelsNode", {
                // 绘制节点
                draw(cfg, group) {
                    console.log(cfg, group, '00')
                    var shape = this.drawShape(cfg, group);
                    if (cfg.label && cfg.label.length) {
                        this.drawLabel(cfg, group);
                    }
                    return shape;
                },


                // 绘制label
                drawLabel(cfg, group) {
                    console.log(cfg, group, '11')
                    var size = this.getSize(cfg);
                    var width = 240;
                    const height = 70;
                    var label = cfg.label;
                    // 绘制第三层级节点的第一个label样式，先绘制一个矩形框
                    group.addShape("rect", {
                        attrs: {
                            x: -120,
                            y: -15,
                            fill: "#D4F0E1",
                            width: 100,
                            height: 30,
                            radius: [2, 4]
                        }
                    });
                    //再添加label文本
                    group.addShape("text", {
                        attrs: {
                            text: label[0] || "",
                            x: 0 - width / 2 + 5,
                            y: 0,
                            fill: "#222",
                            textAlign: "left",
                            textBaseline: "middle"
                        }
                    });
                    if (label.length > 1) {
                        // 绘制第三层级节点的第二个label样式，同样先绘制一个矩形框
                        group.addShape("rect", {
                            attrs: {
                                text: label[1] || "",
                                x: 20,//矩形框的相对节点的横坐标位置
                                y: -15,//矩形框的相对节点的纵坐标位置
                                fill: "#C3D4EE",
                                width: 100,
                                height: 30,
                                radius: [2, 4]//矩形框圆角设置
                            }
                        });
                        //再添加label文本
                        group.addShape("text", {
                            attrs: {
                                text: label[1] || "",
                                x: 60,
                                y: 0,
                                fill: "#222",
                                textAlign: "center",
                                textBaseline: "middle",
                                fontWeight: "bold"
                            }
                        });
                    }
                }
            }, "rect")
            var graph = new G6.TreeGraph({
                container: 'mountNode',
                width: window.innerWidth,
                height: window.innerHeight,
                pixelRatio: 2,
                modes: {
                    default: [{
                        type: 'collapse-expand',
                        onChange: function onChange(item, collapsed) {
                            var data = item.get('model').data;
                            data.collapsed = collapsed;
                            return true;
                        }
                    }, 'drag-canvas', 'zoom-canvas']
                },
                layout: {
                    nodesepFunc: () => 3, //这个就是节点与节点之间的距离，可以说是纵向拉伸高度
                    ranksepFunc: () => 30,//这个参数设置的是你的箭头距离节点的距离，值越大，图横向拉伸的越宽
                },
                //默认节点设置
                defaultNode: {
                    size: 16,
                    anchorPoints: [[0, 0.5], [1, 0.5]],
                    style: {
                        fill: '#F4F4F4',
                        stroke: '#F4F4F4'
                    },
                    radius: [2, 4],

                },
                //默认边设置
                defaultEdge: {
                    shape: 'cubic-horizontal',//有很多类型可以看官方文档api
                    // shape: 'line-arrow',
                    style: {
                        stroke: '#3D3D6D'
                    }
                },
                layout: {
                    type: 'mindmap',
                    direction: 'H',
                    getHeight: function getHeight() {
                        return 16;
                    },
                    getWidth: function getWidth() {
                        return 16;
                    },
                    getVGap: function getVGap() {
                        return 10;
                    },
                    getHGap: function getHGap() {
                        return 100;
                    }
                }
            });

            var centerX = 0;
            graph.node(function (node) {
                if (node.id === 'Modeling Methods') {
                    centerX = node.x;
                }
                //由于我前两层级节点都是用图片展示里面包含label文字，因此我判断层级为第三层级的时候再显示label
                if (node.level == 3) {
                    return {
                        label: node.label,//用于是否显示label标签
                        labelCfg: {
                            position: node.children && node.children.length > 0 ? 'left' : node.x > centerX ? 'right' : 'left'
                        }
                    };
                } else {
                    return {
                        style: {
                            fill: '#40a9ff',
                            stroke: '#096dd9'
                        },
                        label: '',
                        labelCfg: {
                            position: node.children && node.children.length > 0 ? 'left' : node.x > centerX ? 'right' : 'left'
                        }
                    };
                }

            });
            // 单击节点事件
            graph.on('node:click', (e) => {
                const nodeItem = e.item // 获取被点击的节点元素对象
                console.log('单击', nodeItem._cfg)
            })

            graph.data(this.data);
            graph.render();
            graph.fitView();
        }
    },
    created() { },
    mounted() {
        this.render()
    }
}
</script>
<style lang="less" scoped>
#mountNode {
    width: 100%;
    height: 90%;
    background: url("../../../../static/img/jdbg.png");
    background-size: 100% 90%;
}
@media screen and (min-width: 200px) and (max-width: 1600px) {
}
@media screen and (min-width: 1601px) {
}
</style>

suoh's Blog
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Antv G6超详细笔记及使用案例分享
m0_73884922的博客
06-22 1475
G6 是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。
Vue自定义树形插件（添加、编辑、删除节点） （iview样式）
这是个问题
09-23 5464
项目需求，要自己封装一个树形插件来模拟后端的类 期间遇到了几个问题 1） 添加子节点时，原来触发的事件不生效了 解决方案： if (!item.children) { this.$set(item, 'children', []) this.$set(item, 'expand', true) } item....
AntV G6 组织图使用（后端渲染数据）
往事随风
01-13 3331
AntV G6 后端渲染数据
vued3treeVUE实现自定义节点的树结构
08-09
vued3treeVUE实现自定义节点的树结构
vue中使用antv/g6绘制树图
chelly_z的博客
09-23 605
vue使用G6绘制树状图
vuejs使用递归组件实现树形目录
weixin_33826268的博客
09-30 1020
上篇文章我提到了通讯录的开发，里面的目录使用了vue的递归组件实现的树形目录，这篇文章就来讲讲如何实现树形目录吧！ 首先实现效果如下，觉得菜单还是比较nice的是吧： 这边数据调用的是数据库的数据的，需要数据库进行数据的构造，这里涉及到java的构造多叉树的知识，后续我会另外写一篇文章详细讲解，这里讲下前端。 数据可以先构造json使用...
vue+element 树形组件tree自定义节点
aithena的博客
04-18 3900
1、下载安装依赖包 npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env --save-dev 2、项目根目录下新建.babelrc 文件，并写入代码 { "presets": [ ...
VUE自定义树形结构组件.zip
04-21
"VUE自定义树形结构组件.zip"这个压缩包包含了一个实现这一功能的示例项目。让我们深入探讨其中涉及的关键知识点。 1. **Vue.js**: Vue.js是一个轻量级的前端JavaScript框架，它允许开发者通过声明式的方式构建用户...
vue实现的树形结构加多选框示例
10-17
主要介绍了vue实现的树形结构加多选框,结合实例形式分析了在之前递归组件实现vue树形结构的基础之上再加上多选框功能相关操作技巧,需要的朋友可以参考下
VUE 实现树形结构
10-08
vue 树形结构 添加删除节点 返回ID 可同步到服务器 treelist组件
使用Vue-Grid-Layout实现自定义工作台
02-01
在本教程中，我们将深入探讨如何使用 Vue-Grid-Layout 实现自定义工作台。 首先，我们需要安装 Vue-Grid-Layout 和其依赖 Vue.js。如果你还没有设置 Vue 项目，可以使用 Vue CLI 创建一个新的项目。在已有的项目中...
vue中使用antv/x6编写自定义流程
最新发布
04-14
在vue中使用antv/x6和element组件，实现自定义流程的编写，使用antv/x6实现画布绘制和流程绘制，通过拖动节点到画布的方式进行节点的添加，使用element组件实现鼠标移入节点后的自定义功能，使用antv/x6自带的api和...
vue 自定义 Tree 组件
qzonemen的专栏
09-27 832
syTree.vue <style lang="scss"> label{font-size: 14px;} .notetitle{cursor: pointer;} .notetitle:hover{background-color: #eaf4fe;}//移上样式 .notetitle-selected{background-color: #d5e8fc;}//点击后样式 ul.tree-ul li{line-height:28px;} .tree-square{font-siz
vue + el-tree 实现插入节点自定义名称数据
记录常见的问题以及解决办法
02-15 4286
【代码】vue + el-tree 实现插入节点自定义名称数据。
vue g6 hello world
都是浮云
06-04 5006
在下当前所在项目需要弄一个流程图，前端框架用的vue，所以研究一下g6在vue下的使用。 g6介绍 G6 是蚂蚁金服旗下一个开源图可视化框架。它提供了一套图可视化的基础设置，能帮助开发者搭建属于自己的图 图分析 应用或是 图编辑器 应用。 个人感觉这个图可视化框架比 GoJS更优秀更好用些。 项目地址：https://github.com/antvis/g6 准备 通过 npm 安装 npm in...
G6图可视化引擎 v4.1.7 内置丰富的节点与边元素自由配置支持自定义+自定义布局
SEO资源下载
02-20 375
软件介绍： G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。 基于 G6，用户可以快速搭建自己的 图分析 或 图编辑 应用。 丰富的元素：内置丰富的节点与边元素，自由配置，支持自定义； 可控的交互：内置 10+ 交互行为，支持自定义交互； 强大的布局：内置了 10+ 常用的图布局，支持自定义布局； 便捷的组件：优化内置组件功能及性能； 友好的体验：根据用户需求分层梳理文档，支持 TypeScript 类型
vue element tree自定义树。内容过长显示...鼠标悬浮显示全部
qq_34169240的博客
09-01 4786
css /*树悬浮框: 名字过长则显示...*/ .span-ellipsis { width: calc(100% - 4px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: auto; padding: 4px 2px; border-radius: 4px; } 应用 <el-tree :data="Datas" :props="defaultProps
g6图形化开发 - vue项目（结尾处附代码）
Cqin001的博客
06-07 1830
G6参考文档[https://g6.antv.vision/zh](https://g6.antv.vision/zh) > 官方简介：G6是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。 **初始化—>加载数据—>渲染—>更新—>销毁** *G6.Graph、data(data)、render()、changeData(data)、clear()*
Vue G6 自定义组件 可视化树形图搭建，紧凑型，可直接复用
m0_62228727的博客
12-03 4286
话不多说，直接上图 效果图如上，代码如下， template： script：（导入之前，请先下载 npm install --save @antv/g6 ） 数据准备部分以及画板构建和渲染：
vue2使用antvG6自定义折线方法
03-29
1. 安装antvG6 ```bash npm install @antv/g6 --save ``` 2. 在Vue组件中引入antvG6 ```vue <template> <div id="container"></div> </template> <script> import G6 from '@antv/g6'; export default { name: 'CustomLine', mounted() { this.initGraph(); }, methods: { initGraph() { const data = { nodes: [ { id: 'node1', x: 100, y: 100 }, { id: 'node2', x: 200, y: 200 }, { id: 'node3', x: 300, y: 300 }, ], edges: [ { source: 'node1', target: 'node2', type: 'custom-line' }, { source: 'node2', target: 'node3', type: 'custom-line' }, ], }; G6.registerEdge('custom-line', { draw(cfg, group) { const startPoint = cfg.startPoint; const endPoint = cfg.endPoint; const shape = group.addShape('path', { attrs: { stroke: '#333', lineWidth: 2, path: [ ['M', startPoint.x, startPoint.y], ['L', endPoint.x, endPoint.y], ], }, name: 'path-shape', }); return shape; }, }); const graph = new G6.Graph({ container: 'container', width: 500, height: 500, defaultEdge: { type: 'custom-line', }, }); graph.data(data); graph.render(); }, }, }; </script> ``` 3. 在注册Edge时，通过draw方法自定义折线的绘制方式。在draw方法中，可以获取到边的起点和终点，然后通过group.addShape('path', {...})方法绘制出折线。最后将折线作为返回值即可。 4. 在Graph实例中，可以通过defaultEdge配置项来指定所有边的类型，也可以通过edges配置项来指定单个边的类型。通过type属性来指定边的类型为custom-line即可。 5. 在上面的示例中，我们仅仅是绘制了一条直线。如果需要绘制更复杂的折线，可以在path数组中添加更多的点来控制折线的形状。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

suoh's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值