Vue中使用antv g6

IT那活儿 2022-11-06

4909

点击上方“IT那活儿”公众号，关注后了解更多内容，不管IT什么活儿，干就完了！！！

一

g6是什么

G6 是一个图可视化引擎。

它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。

二

安装与引入

在项目目录下执行npm install --save @antv/g6；

vue文件中引入import G6 from '@antv/g6'。

三

快速使用

步骤1：我们需要创建用于容纳 G6 绘制的图的容器，div标签，g6在绘制时会在容器内追加canvas标签，将图绘制在里面。

步骤2：数据准备，g6数据源是一个json对象，对象中有节点nodes，边edges字段，我们可以对节点，边进行属性配置，比如节点名称，大小，颜色等，边就是起始点到目标点之间的连线，也可以配置其名称，颜色等。

步骤3：实例化全图，创建关系图（实例化）是需要为图设置容器，宽和高。

除了在节点，边数据源上进行属性配置外，还可以在实例化全图时进行全局配置，对所有节点，边统一配置，节点统一配置在defaultNode对象，边defaultEdge对象，在modes对象里设置画布的拖拽，缩放，节点拖拽。

步骤4：配置数据源，渲染。

注：关系图渲染要在mounted里。

本文作者：朱维(上海新炬王翦团队）

文章转载自IT那活儿，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。