项目中使用antv G6 实现节点链路之间动态效果

项目前端开发框架是使用VUE

项目需求：在不同的服务节点之间，根据不同的链路数据，显示出节点之间的链路状态，同时实现节点之间的动态效果。

先看效果

1 下载依赖包

# 使用CND引入
npm i @antv/g<!-- 引入在线资源 -->
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g-3.2.2/dist/g-3.2.2.min.js"></script>

2 引入项目使用

在main.js中添加

import G6 from '@antv/g6'
Vue.prototype.$G6 = G6;

3 开发使用

先定义数据，数据是一个对象类型，主要包含nodes和edges。整个数据如下：

{nodes: [{id: 'node1', //节点id，不能重复img:'../../static/images/third/node.png', //这里可以自定义节点的小图标x: 100, //节点水平方向坐标y: 100, //节点竖直方向坐标label: '服务器节点1', //节点标签labelCfg: { //节点标签的样式position: 'bottom',style: {fill: '#ffffff',fontSize: 12,},},},{id: 'node2',img:'../../static/images/third/node.png',x: 300,y: 100,color: '#40a9ff',label: '服务器节点2',labelCfg: {position: 'bottom',offset: 10,style: {fill: '#ffffff',fontSize: 12,},},},{id: 'node3',img:'../../static/images/third/node.png',x: 500,y: 100,color: '#40a9ff',label: '服务器节点3',labelCfg: {position: 'bottom',offset: 10,style: {fill: '#ffffff',fontSize: 12,},},},],edges: [//节点之间的连线{source: 'node1', //起始节点target: 'node2', //终止节点style: {stroke: '#7CD13B', //节点之间连线的样式},},{source: 'node2',target: 'node3',style: {stroke: '#FF0000',},},],};

将数据渲染到容器（div）里面

      //获取容器宽高let width = document.getElementById('lineChart').scrollWidth;let height = document.getElementById('lineChart').scrollHeight;//初始化图表this.graph = new this.$G6.Graph({container: 'lineChart', //div容器的idwidth,height,defaultNode: {type: 'image', //节点类型size: [32, 32], //节点大小style: {fill: '#DEE9FF',stroke: '#5B8FF9',},},defaultEdge: {type: 'circle-running', //节点之间连线类型style: { //节点之间连线的样式lineWidth: 2,stroke: '#bae7ff',},},});this.graph.data(data); //将数据添加到初始化后的图表对象中this.graph.render(); //渲染图表

至此，可将节点渲染在div中，那么如何实现节点连线上的小圆圈的动态效果呢，这就用到了registerEdge函数，实现方法如下。

       //registerEdge函数会遍历每一个节点//下面这两个参数是为了设置连线上圆圈的不同颜色let edgeCircleColorIndex = 0;let edgeCircleColorArr = ["#7CD13B", "#FF0000"];this.$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: edgeCircleColorArr[edgeCircleColorIndex++],r: 6, //圆圈大小},name: 'circle-shape',});// 实现动态效果circle.animate(ratio => {const tmpPoint = shape.getPoint(ratio);return {x: tmpPoint.x,y: tmpPoint.y,};},{repeat: true, //动画是否重复duration: 3000, //一次动画持续时长},);},},'cubic',);

当数据变化时，重新渲染即可

      this.graph.data(data);this.graph.render();

项目中使用antv G6 实现节点链路之间动态效果相关推荐

vue中使用Antv g6构建简单流程图
vue中使用Antv g6构建简单流程图前端小白第一次使用,项目需要一个流程图,看了一些博客,简单的写了一个,但是还是没实现项目的需求,希望有会的人帮忙指点一下.项目需要实现的是:可以自定义添加节点 ...
Vue项目中使用AntV X6绘制流程图
Vue项目中使用AntV X6绘制流程图一.需求在Vue2.x(Vue3.x项目同理)项目中使用AntV X6组件库绘制流程图,需要实现以下需求: 需求1:左侧菜单中的模块可以拖拽进入画布中生成对 ...
antvg2 环图轮播_在vue项目中引用Antv G2,以饼图为例讲解
我就废话不多说了,大家还是直接看代码吧~ npm install @antv/g2 --save template内容: js部分: //引入G2组件 import G2 from "@a ...
vue中使用antv/G6完成流程图
目录效果展示后台数据处理后台数据安装完整js代码效果展示自定义节点 G6.registerNode 根据后端返回数据生成流程图后台数据返回的类似数据,需要parentId数组即上级节 ...
AntV G6将节点修改成图片
1.在每个节点中添加图片代码布局如下: 实现效果如下图: 主要代码: defaultNode: { // 节点样式修改type: 'image', // 设置节点为图片size: [40, 40] ...
vue中使用antv/g6 绘制关系图、结构图
使用antv/g6绘制关系图效果图代码实现 npm install @antv/g6 --save <template><div id="app">&l ...
VUE中用AntV G6 + element 实现关系图展示
1.效果图 (我的需求是做字段血缘展示) 2.官方文档 :https://antv-g6.gitee.io/zh/examples/tree/mindmap#hCustomSideMindmap 3. ...
Vue3 项目中使用 AntV X6 绘制流程图
X6 是 AntV 旗下的图编辑引擎,提供了一系列开箱即用的交互组件和简单易用的节点定制能力,方便我们快速搭建流程图.DAG 图.ER 图等图应用. 参考一些网站的写法,然后自己加上了撤销操作. 节点 ...
vue中使用antv/g6 绘制关系图、结构图_CAD小白必看！手把手教你如何看懂室内设计施工图图纸（平面立面剖面大样节点图）...
号外!号外!你们心心念念的干货来了~ 室内设计施工图视频教程+CAD图库可供大家学习研究,希望能对大家有所帮助.如果你喜欢请点赞收藏哦,谢谢~ 本期干货:室内设计施工图视频教程+CAD图库领取方式 ...

项目中使用antv G6 实现节点链路之间动态效果

项目中使用antv G6 实现节点链路之间动态效果相关推荐

最新文章

热门文章