Vue+G6: 开箱即用的树形图组件

已于 2023-05-07 18:42:14 修改
阅读量1k 收藏 1
点赞数 1
文章标签： javascript 前端
于 2023-04-05 21:59:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52268321/article/details/129977608
版权

利用树形图展示数据、父组件中使用props传值，传递展示的数据、线条颜色、布局方式等

1 组件效果展示在这里插入图片描述

在这里插入图片描述

2 使用组件步骤

2.1在项目中引用G6

Step 1: 使用命令行在项目目录下执行以下命令：

npm install --save @antv/g6

Step 2: 在需要用的 G6 的 JS 文件中导入：

import G6 from '@antv/g6';

Step 3: 在 HTML 中使用 CDN 引入

// version <= 3.2
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-{$version}/build/g6.js"></script>
// version >= 3.3
<script src="https://gw.alipayobjects.com/os/lib/antv/g6/{$version}/dist/g6.min.js"></script>
// version >= 4.0
<script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>

⚠️ 注意:
在 {$version} 中填写版本号，例如 3.7.1；

2.2 ctrl c + ctrl v此自定义组件

复制博主的自定义组件代码（treeDiagram）到自己的项目中
代码在文章最下面

2.3 引用组件treeDiagram

2.3.1 引用组件

import treeDiagram from '@/components/treeDiagram/treeDiagram.vue';

在这里插入图片描述

2.3.2 参数说明

在这里插入图片描述

2.3.3 传入的数据举例

getDatas: {
        "name": "Information A",
        "children": [
          {
            "name": "Information",
            "percentage": "60%",
            "children": [
              {
                "name": "Information C",
                "percentage": "80%",
                "children": [
                  {
                    "name": "Information C",
                    "percentage": "80%"
                  },
                  {
                    "name": "Information D",
                    "percentage": "20%"
                  }
                ]
              },
              {
                "name": "Information D",
                "percentage": "20%"
              }
            ]
          },
          {
            "name": "Information C",
            "percentage": "10%"
          },
          {
            "name": "Information B",
            "percentage": "20%"
          },
          {
            "name": "Information C",
            "percentage": "20%"
          },
          {
            "name": "Information C",
            "percentage": "20%",
            "children": [
              {
                "name": "Information",
                "percentage": "20%"
              },
              {
                "name": "Information A",
                "percentage": "20%"

              }
            ]
          }
        ]
      }

2.3.4 完整代码

<template>
    <div class="main-content-box">
      <div id="container"></div>
    </div>
</template>
  
  <script>
  import G6 from '@antv/g6';

  export default {
    name: 'treeDiagram',
    props: {
        staticDatas: {
          type: Object,
          required: true
        },
        //线条颜色
        lineColor: {
          type: String,
          default: "#00BFFF"
        },
        //布局
        treeDirection: {
          type: String,
          default: "LR"
        },
        //有孩子节点的标签边框颜色
        strokeColor1: {
          type: String,
          default: "#00BFFF"
        },
        //无孩子节点的标签边框颜色
        strokeColor2: {
          type: String,
          default: "#7CFC00"
        },
        // 文字颜色
        textColor: {
          type: String,
          default: "#666"
        }
    },
    data () {
      return {

      }
    },
    mounted() {
      this.getInit();
    },
    methods: {
      getInit () {
        let vm = this;
        G6.registerNode('tree-node', {
          drawShape: function drawShape(cfg, group) {
            // console.log(cfg)
            // --------------------标签内容节点----------------------
            let hasChildren = cfg.children && cfg.children.length > 0;   // 是否有孩子节点
            let strokeColor =  hasChildren == true ? vm.strokeColor1 : vm.strokeColor2;     // 有无孩子节点 的边框颜色不同
            // 节点设置 
            const rect = group.addShape('rect', {
              attrs: {
                fill: '#fff',
                stroke: strokeColor,  // 边框颜色
                lineWidth: 1,       // 边框粗细
                radius: 8,
                shadowBlur: 15,
                shadowColor: '#666',
                // shadowOffsetX: 2,
                // shadowOffsetY: 2
              },
              name: 'rect-shape',
            });
            // 文本设置
            const text = group.addShape('text', {
              attrs: {
                text: cfg.name,       // 赋值name属性
                fontFamily: 'normal',
                fontSize: 11,
                fontWeight: 800,
                x: 0,
                y: 0,
                textAlign: 'left',
                textBaseline: 'middle',
                fill: vm.textColor
              },
              name: 'text-shape',
            });
            
            const bbox = text.getBBox();   // 获得文本的盒子 之后的两个节点的xy轴坐标参考bbox
            //const minbbox = rect.getBBox();
            // 设置 rect方框和text文本 的 x y坐标轴
            // rect主节点的长度由其中的文本影响
            rect.attr({
              x: -bbox.width / 2 - 5,
              y: -bbox.height,
              // width: bbox.width + (hasChildren ? 20 : 12),
              width: bbox.width +  12 ,
              height: bbox.height + 8,
            });
            text.attr({
              x: -bbox.width / 2,
              y: -bbox.height / 2 + 3,
            })
            
            // -----------百分比节点----------
            var hasPercentage = cfg.percentage;
            var rect2 = 0;
            if(hasPercentage){
                // 节点设置 2
                rect2 = group.addShape('rect', {
                attrs: {
                    fill: '#fff',
                    stroke: '',  // 边框颜色
                    lineWidth: 0,       // 边框粗细
                    radius: 2,
                    shadowBlur: 15,
                    shadowColor: '#666'
                },
                name: 'rect-shape2',
              });
              // 文本设置 2
              const text2 = group.addShape('text', {
              attrs: {
                  text: cfg.percentage,       // 赋值name属性
                  fontFamily: 'normal',
                  fontSize: 5,
                  fontWeight: 700,
                  textAlign: 'left',
                  textBaseline: 'middle',
                  fill: '#666'
                },
                name: 'text-shape2',
              });
              // 设置坐标轴和宽高
              rect2.attr({
                  x: -bbox.width / 2 - 24,
                  y: -bbox.height / 2 - 1,
                  width: 14,
                  height: 10,
              });
              text2.attr({
                  x: -bbox.width / 2 - 23,
                  y: -bbox.height / 2 + 4,
              })
              // -------连接两个节点的小节点----------
              // const rect3 = group.addShape('rect', {
              //     attrs: {
              //         fill: '#00BFFF',
              //         stroke: '',  // 边框颜色
              //         lineWidth: 0,       // 边框粗细
              //         shadowBlur: 0,
              //         shadowColor: '',
              //     },
              //     name: 'rect-shape3',
              // });
              // rect3.attr({
              //     x: -bbox.width / 2 - 24 + 14,   // 即：rect的坐标 + rect的宽 
              //     y: -bbox.height / 4 + 1,
              //     width: 4,
              //     height: 4
              // });
              // -------连接两个节点的小节点 三角形----------
              // 需要设置svg才能使用
              group.addShape('dom', {
                attrs: {
                  x: -bbox.width / 2 - 24 + 14,   // 即：rect的坐标 + rect的宽 
                  y: -bbox.height / 2 - 1,
                  width: 10,
                  height: 10,
                  html: `
                  <div style="border-left: 5px solid #00BFFF; 
                              border-right: 5px solid transparent;
                              border-top: 5px solid transparent;
                              border-bottom: 5px solid transparent;">
                  </div>
                    `,
                },
                draggable: true,
              });
            }
            

            // 小圆圈
            if (hasChildren) {
              const redcircle = group.addShape('marker', {
                  attrs: {
                  symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse,
                  // symbol: cfg.collapsed ? COLLAPSE_ICON : EXPAND_ICON,
                  stroke: '#00BFFF',
                  fill: '#00BFFF',
                  lineWidth: 1.8,
                },
                name: 'collapse-icon',
              });
              redcircle.attr({
                  x: bbox.width / 2 + 7,
                  y: -3 ,
                  r: 4,

              })
            }

          

            return rect;
          },
          update: (cfg, item) => {
            const group = item.getContainer();
            const icon = group.find((e) => e.get('name') === 'collapse-icon');
            icon.attr('symbol', cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse);
          },
        },
        'single-node',
      );
  
      const container = document.getElementById('container');
      const width = container.scrollWidth;
      const height = container.scrollHeight || 500;
  
      const graph = new G6.TreeGraph({
        renderer : 'svg',     // 创建自定义DMO时定义 会报一个错 但好像不影响 
        container: 'container',
        width,
        height,
        modes: {
          default: [
            {
              type: 'collapse-expand',
              onChange: function onChange(item, collapsed) {
                const data = item.get('model');
                graph.updateItem(item, {
                  collapsed,
                });
                data.collapsed = collapsed;
                return true;
              },
            },
            'drag-canvas',    // 拖动
            'zoom-canvas',    // 收缩
          ],
        },
        defaultNode: {
          type: 'tree-node',
          anchorPoints: [
            [0, 0.5],
            [1, 0.5],
          ],
        },
        // 设置边的参数
        defaultEdge: {
          type: 'cubic-horizontal',
          style: {
            stroke: this.lineColor
          },
        },
        layout: {
            type: 'indented',
            direction: this.treeDirection,
            dropCap: false,
            indent: 190,
            getHeight: () => {
              return 13;
            },
            getVGap: function getVGap () {
              return 10;
            },
        },
      });
  
  
      
  
      graph.data(this.staticDatas);
      graph.render();
      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);
        };
      },
  
  
  
  
    }
  }
  
  </script>
  
  <style scoped>
  </style>
诚诚程程成
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
G6学习笔记（精简版）
weixin_45895370的博客
01-09 4470
可以参照一下g6官网： g6官网 什么是G6 可视化引擎 提供图的绘制、布局、分析、交互、动画.。 可以快速搭建图分析或图编辑应用 g6的引入 引入有两种方法：NPM包引入和CDN引入 npm: 使用命令行在项目目录下： npm install --save @antv/g6 在需要使用g6的js文件中：import G6 from ‘@antv/g6’; cdn: 在html中：加粗部分是用来写g6的版本号 // version <= 3.2 // version >= 3.3 g6图
AntVg6.min.js
10-20
阿里AntV | G6
组件树状图
qq_44215981的博客
11-09 134
主要类 /** *主数据配置类 */ public class MasterDataConfiguration implements Serializable { private static final long serialVersionUID = 1L; private String Code ; private String parentCode ; private String disabled ; private String aliasCH
阿里G6 树状图使用 Iconfont
wwf1225的博客
03-20 922
fontFamily: 'iconfont', // 对应css里面的font-family: "iconfont";text: '\ue656', // 对应iconfont.css 里面的content，注意加u，后面的自行修改一下。label: '多伦多',label: '小王',label: '王五',label: '张三',label: '凶器',relation: '老婆',label: '马航37*',label: '**网咖',label: '可疑人员王**',label: '小花',
antv G6关系树,拓扑图 不同层级不同颜色
weixin_43855869的博客
11-28 7741
前端菜鸡… 近期遇到一个需求,要求关系图每个层级不同颜色展示,位置还得随机,目前echart实现后都不太满意…em 于是G6 … 废话不多说 看代码(效果)// 1,引入G6 相关 (基础数据是官方的) import G6 from '@antv/g6' fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorith...
【Antv-G6成长之路一】初识antv G6之什么是G6，G6能做哪些事情？（附实例图文）
赏樱看雪撸代码
02-26 2209
Antv G6概念与理解，利用antv G6进行画图，如何绘制拓扑图，前端有何画出一个高质量的拓扑图，页面如何实现树状拓扑结构，G6使用指南之初识G6。
vue中使用g6实现流程图
热门推荐
weixin_43637720的博客
01-15 1万+
g6在vue中使用小结前言vue中进行引入vue中使用 前言 由于项目需求，需要动态生成流程图，仅用于展示效果，搜了很多开源插件，最后决定使用阿里的antVG6，但是g6官方文档中还是有一些问题，网上相关的资料也比较少，自己摸索了一段时间，踩过很多坑，我就自己写个备忘，也与大家分享一下，g6提供了很多流程图的api，我的需求并没有涉及到交互，所以我也没弄，感兴趣的可以自己看一下。g6官方文档地址：......
Vue G6 自定义组件 可视化树形图搭建，紧凑型，可直接复用
m0_62228727的博客
12-03 4101
话不多说，直接上图 效果图如上，代码如下， template： script：（导入之前，请先下载 npm install --save @antv/g6 ） 数据准备部分以及画板构建和渲染：
vue中使用AntV G6 — 基础篇
豆。的博客
04-20 1万+
阿里AntV-G6使用介绍 一 基础篇 AntV G6 官网 AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。 文章目录阿里AntV-G6使用介绍 一 基础篇一、G6 是什么？二、使用步骤1.安装&引入2.基本使用三、结果图 一、G6 是什么？ G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。 二、使用步骤 1.安装&amp
vue：antV | G6的超级详细使用（包括基本使用、示例使用、自定义节点以及增删改查功能的灵活应用）
qq_45796592的博客
12-21 6839
一文掌握G6的详细使用（包括基本使用、示例使用、自定义节点以及增删改查功能的灵活应用）
vue3+Vant+pinia 开箱即用，移动端框架
01-30
7、将最新的vue3框架搭建最新的H5移动端项目，开箱即用； 8、适合新手学习、适用于公司项目； 9、框架代码有写详细的项目描述，便于开发者能够快速读懂、看懂； 10、获取到项目后使用 `npm install` 安装依赖包； 11...
Vue3+TS：实现小红书瀑布流虚拟列表组件.zip
最新发布
04-03
Vue3+TS：实现小红书瀑布流虚拟列表组件.zip
vue+js:Heatmap 热力图实现，亲测可用
07-06
vue+js:Heatmap 热力图实现，亲测可用，依赖Heatmap.js插件，下载后添加引用即可。
logicflow+vue流程可视化开箱即用demo模板
08-12
logicflow+vue流程可视化开箱即用demo模板
HUI:开箱即用的一组高质量Vue组件
05-27
:package: 开箱即用的一组高质量Vue组件。 :gear: 整套设计资源和开发工具。 :globe_showing_Europe-Africa: 对数十种语言的国际化支持。 :artist_palette: 强大的主题自定义细节。 :desktop_computer: 环境...
vue antv-G6树图的摸索总结—新手入门
想卷回去的小菜鸡的博客
07-06 1万+
通过antvG6官网内置API实现树图的加载绚烂，以及对各个属性进行详细讲解，把过程中遇到的问题以及解答方案一一列举，随着各种需求，不断更新。
Vue3使用G6基础
m0_60394632的博客
11-19 3001
需要用到思维导图，找到蚂蚁金服的G6可以满足需求，不得不说阿里巴巴yyds，这一套图标全家桶可太棒了,熟悉了下基本用法，记录下来,官网讲的就很好了，建议去认真读读手册就会用了,这里总结的更精简和直观，需要的小伙伴可以看看,目前还是一些比较基础的操作，后面用的深入了还会更新
使用antv/G6在vue项目中开发较复杂样式流程图
前端搬砖人的开发记录
11-03 7726
antv/G6开发流程图
如何用vue3+ts语法封装一个树形组件公共使用
03-26
以下是使用vue3和ts语法封装一个树形组件： 1. 创建一个Vue组件，命名为Tree，该组件将接受以下属性： ```ts interface TreeNode { id: string; name: string; children?: TreeNode[]; } interface TreeProps ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值