Ant G6 在vue项目上的引入以及使用

最新推荐文章于 2024-03-28 09:31:56 发布
最新推荐文章于 2024-03-28 09:31:56 发布
阅读量5.9k 收藏 26
点赞数 2
分类专栏： vue ant G6 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/juan_bing/article/details/126189514
版权

Ant G6 在vue上的使用

1.引入方式

引入方式分为两种：
1-1：在 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>

1-2：在项目中使用 NPM 包引入

 npm install --save @antv/g6

//在需要用的 G6 的 JS 文件中导入：
import G6 from '@antv/g6';

2.创建画布

需要在 HTML 中创建一个用于容纳 G6 绘制的图的容器，通常为 div 标签。G6 在绘制时会在该容器下追加 canvas 标签，然后将图绘制在其中：

<template>
  <div class="container" id="container">
  </div>
</template>

3.数据准备

data() {
    return {
      graph: null,//初始化
      registerEdge: null,//线上的动画效果初始化
      newData: {
        nodes: [//节点
          {
            id: "node1",//元素id
            x: 100,//left
            y: 100,//top
            label: "172.1.2.3",//节点文字描述
            size: 30,//节点大小
            labelCfg: {
              position: "bottom",//label位置
            },
          },
          {
            id: "node2",
            x: 300,
            y: 200,
            color: "#40a9ff",
            label: "172.2.2.4",
            size: 30,
            labelCfg: {
              position: "bottom",
            },
          },
          {
            id: "node3",
            x: 500,
            y: 320,
            color: "#40a9ff",
            label: "172.2.2.5",
            size: 30,
            labelCfg: {
              position: "bottom",
            },
          },
        ],
        edges: [//连线
          {
            source: "node1",//源节点
            target: "node2",//目标节点
            label: "第一条",//线上的文字描述
            // style: {
            //   endArrow: true,//源节点箭头是否显示
            //   startArrow: true,//目标节点箭头是否显示
            // },
          },
          {
            source: "node1",
            target: "node3",
            label: "第二条",
            // style: {
            //   endArrow: true,
            //   startArrow: true,
            // },
          },
        ],
      },
    };
  },

4.初始化 G6

initG6() {
      const width = document.getElementById("container").scrollWidth || 800;
      const height = document.getElementById("container").scrollHeight || 800;
      // const nodes = this.getData.nodes;
      //   this.nodeEach(nodes);
      this.graph = new G6.Graph({
        // 1.画图挂载容器id
        container: "container",
        // 1.1容器宽高
        width,
        height,
        fitView: true,
        fitViewPadding: [20, 40, 50, 20],
        // 节点在默认状态下的样式配置（style）和其他配置
        defaultNode: {
          // 节点上的标签文本配置
          size: [30, 30],
          labelCfg: {
            // 节点上的标签文本样式配置
            style: {
              fill: "#000", // 节点标签文字颜色
              fontSize: 13,
            },
          },
        },
        //边默认的属性，包括边的一般属性和样式属性（style）。
        defaultEdge: {
          type: "circle-running", //配置的动画，不需要动画可以不写
          shape: "line",
          color: "#000",
          endArrow: true,
          startArrow: true,
          labelCfg: {
            autoRotate: true,
          },
          style: {
            lineWidth: 2,//线的宽度
            stroke: "#47c21f",//线的颜色
            // stroke: "#bae7ff",
          },
        },
        modes: {
          default: [
            "drag-canvas",//拖拽画布
            "zoom-canvas",//鼠标滑轮放大缩小画布
            "drag-node",//节点拖拽
            "click-select",//click-select  按住shift点击多选 需要下方配置
            "brush-select",//brush-select 按住shift滑动鼠标框选多选 需要下方配置
          ], 
          //   altSelect: [//按住shift点击多选
          //     {
          //       type: "click-select",
          //       trigger: "alt",
          //     },
          //     "drag-node",
          //   ],
          altSelect: [//按住shift滑动鼠标框选多选
            {
              type: "brush-select",
              trigger: "drag",
            },
            "drag-node",
          ],
        },
      });

      // 读取 data 中的数据源到图上
      this.graph.data(this.newData);
      // 渲染图
      this.graph.render();
      this.graph.zoom(0.4);
    },

5.配置连接线上的动画效果

initEdge() {
      // return
      this.registerEdge = new G6.registerEdge(
        "circle-running",
        {
          afterDraw(cfg, group) {
            // 获取组中的第一个形状，这是边的路径=
            const shape = group.get("children")[0];
            // 边路径的起始位置
            const startPoint = shape.getPoint(0);

            // 添加蓝色圆圈形状
            const circle = group.addShape("circle", {
              attrs: {
                x: startPoint.x,
                y: startPoint.y,
                fill: "#1890ff",
                r: 3,
              },
              name: "circle-shape",
            });

            // 蓝色圆圈的动画
            circle.animate(
              (ratio) => {
                // 每个帧中的操作。比率范围从0到1，表示动画的进度。返回修改后的配置 根据比率获得边缘上的位置
                const tmpPoint = shape.getPoint(ratio);
                // 这里返回修改后的配置，这里返回x和y
                return {
                  x: tmpPoint.x,
                  y: tmpPoint.y,
                };
              },
              {
                repeat: true, // 是否重复执行动画
                duration: 3000, // 动画完成时间
              }
            );
          },
        },
        "line" // 直线
      );
    },

6.调用位置

建议放到mounted钩子函数里执行

mounted() {
    this.initEdge();
    this.initG6();
};

7.G6的监听方法

这里就举例几个常用的监听

//节点
this.graph.on("node:click", (ev) => {});//监听节点的点击方法
this.graph.on("node:mouseenter", (ev) => {});//监听节点的鼠标移入方法
this.graph.on("node:mouseleave", (ev) => {});//监听节点的鼠标移出方法

//连接线
this.graph.on("edge:click", (ev) => {});//监听连接线的点击方法
this.graph.on("edge:mouseenter", (ev) => {});//监听连接线的鼠标移入方法
this.graph.on("edge:mouseleave", (ev) => {});//监听连接线的鼠标移出方法

//画布点击方法
this.graph.on("canvas:click", (ev) => {});//监听画布的点击方法

8.进阶操作，交互功能

	点击节点改变label字体样式

this.graph.on("node:click", (ev) => {
		//改变前先清除别的节点的点击样式
      for (let i = 0; i < this.newData.nodes.length; i++) {
        this.graph.updateItem(this.newData.nodes[i].id, {
          labelCfg: {
            style: {
              fill: "#000",
              stroke:'#000',
              lineWidth:0,
            fontSize:13
            },
          },
        });
      }
      let node = ev.item; // 被点击的节点元素
      let shape = ev.target; // 被点击的图形，可根据该信息作出不同响应，以达到局部响应效果
      this.graph.updateItem(node, {//更改节点
        labelCfg: {
          style: {
            fill: "#ff00ff",
            stroke:'#000',
            lineWidth:2,
            fontSize:13
          },
        },
      });
    });
   
   //点击画布时清空点击样式
   this.graph.on("canvas:click", (ev) => {
      console.log("画布", ev);
      for (let i = 0; i < this.newData.nodes.length; i++) {
        this.graph.updateItem(this.newData.nodes[i].id, {
          labelCfg: {
            style: {
              fill: "#000",
              stroke:'#000',
              lineWidth:0,
            fontSize:13
            },
          },
        });
      }
    });

	移入连接线改变线的样式

// 鼠标移入
    this.graph.on("edge:mouseenter", (ev) => {
      console.log("鼠标移入", ev);
      let node = ev.item;
      let model = node.getModel();
      model.oriLabel = model.label;
      this.graph.updateItem(node, {
          style: {
            stroke: '#47c21f',
            lineWidth:4,
          },
      });
    });
    // 鼠标移除
    this.graph.on("edge:mouseleave", (ev) => {
      let node = ev.item;
      let model = node.getModel();
      this.graph.updateItem(node, {
          style: {
            stroke: '#47c21f',
            lineWidth:2,
          },
      });
    });

效果图

点击节点效果

多选效果
移入线效果

拓展节点类型

正常默认节点样式：

在这里插入图片描述

我这个demo用的是图片类型，需要改变节点的type

nodes: [
          {
            id: "node1",
            x: 100,
            y: 100,
            label: "172.1.2.3",
            type: "image",
            size: 30,
            img:'https://img1.baidu.com/it/u=3079431989,3499240801&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=729',
            labelCfg: {
              position: "bottom",
            },
          },
      ]

**注意：**引入本地照片时需 require形式引入

星辰落入深海
关注
  • 2
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
antv/g6 元素之边、自定义边
study_way的博客
10-31 3036
上篇文章简单介绍了一下g6的使用，今天继续讲g6的元素边。g6有内置的几种边，可以实现一些基础的图，如果内置边不满足需求，还可以自定义边。下面简单实现一个自定义边，在边的中间画了一个矩形，添加了动画，然后修改了选中、悬停的样式。return {},},attrs: {width: 10,// x 和 y 分别减去 width / 2 与 height / 2，使矩形中心在 midPoint 上。
vue：antV | G6的超级详细使用（包括基本使用、示例使用、自定义节点以及增删改查功能的灵活应用）
qq_45796592的博客
12-21 5486
一文掌握G6的详细使用（包括基本使用、示例使用、自定义节点以及增删改查功能的灵活应用）
Ant G6实现知识图谱
最新发布
qq_32054169的博客
03-28 613
AntV G6是阿里巴巴集团开发的一款专注于关系数据可视化的图表库。G6基于Canvas/WebGL技术，提供了丰富的图形绘制、交互操作和布局算法等功能。它采用数据驱动的方式来渲染图表，通过定义节点和边的数据结构，再通过布局算法来确定它们在画布上的位置，最终实现图表的展示。在本文中，我们介绍了AntV G6的原理和特性，结合Vue 3.0和G6实现知识图谱的步骤，并提供了示例代码及其解析。
VUE和Antv G6实现在线拓扑图编辑
qq_36659961的博客
04-04 1万+
VUE和Antv G6实现在线拓扑图编辑 效果图如下： 我使用的是G6 2.0,也可以使用 G6 3.0，3.0的拓扑图单独作为一个编辑器使用，使用更加方便。不过2.0的比较简单，容易上手。 1.首先在Antv官网上找到蚂蚁Antv G6插件，引入插件。 也可以npm 方式引入。 2.写组件 export default { name: “index”, components: {},...
Antv G6构建流程图(修正)
weixin_43637720的博客
01-20 3569
Antv G6构建流程图(修正) 1.在项目中进行引入G6 1.1使用CDN引入 <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-{$version}/build/g6.js"></script> 1.2在项目中使用 npm 包引入 Step 1: 使用命令行在项目目录下执行以下命令： npm...
Antv G6入门之旅--combo图
Blog of Leviash
10-23 2245
G6是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight，为数据科学家和开发者提供了一种全新的方式来展示和探索数据。我曾经使用过 ECharts 与 D3.js，当我遇见 AntV G6 后，突感惊喜，其内含丰富的效果与强大的功能。相对于 ECharts，AntV G6 的图表种类更多，也更灵活，更容易上手；而相对于 D3.js，AntV G6 的 API 更为简单易用，适合快速上手。
antv/g6使用教程及图配置
study_way的博客
10-30 2912
G6 是一款由蚂蚁金服 AntV 团队开发的 JavaScript 图形引擎，用于构建各种交互式可视化图形，包括但不限于图表、网络拓扑图、关系图、流程图等。无论是数据分析、决策支持，还是信息可视化，G6 都是一个强大的工具。丰富的图形元素支持：G6 支持多种图形元素，包括节点、边、群组、标签等，这些元素可以被自定义和样式化，以创建各种类型的图形。交互性：G6 可以实现各种交互功能，如缩放、平移、拖拽、连线、节点拖拽等，以提供丰富的用户体验。自动布局。
【Antv-G6成长之路一】初识antv G6之什么是G6，G6能做哪些事情？（附实例图文）
赏樱看雪撸代码
02-26 1715
Antv G6概念与理解，利用antv G6进行画图，如何绘制拓扑图，前端有何画出一个高质量的拓扑图，页面如何实现树状拓扑结构，G6使用指南之初识G6。
vue antv-G6树图的摸索总结—新手入门
热门推荐
想卷回去的小菜鸡的博客
07-06 1万+
通过antvG6官网内置API实现树图的加载绚烂，以及对各个属性进行详细讲解，把过程中遇到的问题以及解答方案一一列举，随着各种需求，不断更新。
antd_g6库的使用
weixin_44022171的博客
05-31 1497
对于之前是做可视化开发的我来说，使用这个antd/g6的可视化拓扑库应该是轻车熟路了，底层无非就是canvas封装的，暴露出了可视化行业中所说的节点Node和连线Link，以及涉及到的Group组的概念，Layer图层等概念。这么一般操作下来，最大的感受就是要勤于思考，之前一直使用的是公司内部的canvas库，用起来就很熟悉很顺手，现在突然遇到一个没有接触过的canvas库，一开始都是一头雾水，很不适应，完全无从下手的感觉，核心其实都是差不多的，还是要多尝试，写demo去测试、发现问题，并且想出解决办法。
创建Vue项目以及引入Iview的方法示例
10-17
主要介绍了创建Vue项目以及引入Iview的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
08-27
主要介绍了在 Vue 项目中引入 tinymce 富文本编辑器的实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
详解如何在vue项目中引入elementUI组件
08-28
主要介绍了详解如何在vue项目中引入elementUI组件,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue学习笔记五：在vue项目里面使用引入公共方法详解
10-17
主要介绍了在vue项目里面使用引入公共方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue项目引入ts步骤(小结)
10-16
主要介绍了vue项目引入ts步骤(小结),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue中使用antvG6画分组结构图及树形关系图
蜗牛~~
06-24 7342
效果图： <div id="container" ></div> 我是对G6中提供的该图的相关函数进行了封装--下面的代码是写在公共js文件里面： export function renderMap(data,graph){ const collapseIcon = (x, y, r) => { return [ ['M', x - r, y], ['a', r, r, 0, 1, 0, r..
antv系列图引擎X6、G6比对选择，并实现vue实例ER图
weixin_46037781的博客
11-16 4349
官方示例中是(使用String自定义 ToolBar 功能)但是，看了文档，我们还可以使用使用DOM自定义 ToolBar 功能// 工具栏 const toolbar = new G6 . ToolBar({// 渲染自定义节点---组件 const outEl = document . getElementById('toolbar') return outEl } , position : {官方示例注册的自定义边没有提供连线，所以我们如果有需要则得在方法中自己定义连线中途的图形制作默认。
使用antv/G6，实现自定义节点流程图
m0_60666754的博客
11-14 2167
初始化的图数据，是一个包括 nodes （节点）数组和 edges （线）数组的对象。图一是鼠标移出隐藏连接点，图二是鼠标移入显示连接点。第二排图标是第一排拖拽出来的。第一排小图标是可拖拽的。添加事件，让图片可拖拽。
ant design vue在html中引入
05-22
如果您想在 HTML 中使用 ant design vue，需要先引入 ant design vue 的 CSS 文件和 JavaScript 文件。 首先，从 ant design vue 的官网下载所需的文件。在文件中包含了 ant design vue 的 CSS 文件和 JavaScript ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值