G6 是一个图可视化引擎，不仅能够支持 Vue2 还能支持 Vue3 。 提供了丰富图形应用，让数据关系变的简单明了，收到用户的广泛使用。官方文档：https://g6.antv.vision/zh/
G6 的特性
G6 作为一款专业的图可视化引擎，具有以下特性：
- 优秀的性能：支持大规模图数据的交互与探索；
- 丰富的元素：内置丰富的节点与边元素，自由配置，支持自定义；
- 可控的交互：内置 10 交互行为，支持自定义交互；
- 强大的布局：内置了 10 常用的图布局，支持自定义布局；
- 便捷的组件：优化内置组件功能及性能；
- 友好的体验：根据用户需求分层梳理文档，支持 TypeScript 类型推断。
使用之前必须先安装，才能使用：
npm install --save @antv/g6
在需要到的 G6 的文件中导入：
import G6 from '@antv/g6';
创建一个 G6 的关系图仅需要下面几个步骤：
- 创建关系图的 HTML 容器；
<div id="mountNode"></div>
2.数据准备；
const data = {
id: 'node',
label: 'node'
children: [
{
id: 'node1', // String，该节点存在则必须，节点的唯一标识
label: 'node1'
},
{
id: 'node2', // String，该节点存在则必须，节点的唯一标识
label: 'node2'
},
],
};
3.创建关系图；
const graph = new G6.Graph({
container: 'mountNode', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
width: 800, // Number，必须，图的宽度
height: 500, // Number，必须，图的高度
});
4.配置数据源，渲染。
graph.data(data); // 读取 Step 2 中的数据源到图上
graph.render(); // 渲染图
看着上面的步骤和官方文档都很简单，使用的是 js ，如果我们使用 vue3 ts 引入官方示例的时候，复制进去打包的时候一篇错误，尤其是我们不知道 graph 数据类型是啥样的。
import G6, { TreeGraph } from '@antv/g6';
let graph: TreeGraph
完整示例：
<template>
<div id="container" style="height:500px;width:100%;border:solid 1px red;"></div>
</template>
<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue';
import G6, { TreeGraph } from '@antv/g6';
onMounted(() => {
const data = {
isRoot: true,
id: 'Root',
style: {
fill: 'red',
},
children: [
{
id: 'SubTreeNode1',
raw: {},
children: [
{
id: 'SubTreeNode1.1',
},
{
id: 'SubTreeNode1.2',
children: [
{
id: 'SubTreeNode1.2.1',
},
{
id: 'SubTreeNode1.2.2',
},
{
id: 'SubTreeNode1.2.3',
},
],
},
],
},
{
id: 'SubTreeNode2',
children: [
{
id: 'SubTreeNode2.1',
},
],
},
{
id: 'SubTreeNode3',
children: [
{
id: 'SubTreeNode3.1',
},
{
id: 'SubTreeNode3.2',
},
{
id: 'SubTreeNode3.3',
},
],
},
{
id: 'SubTreeNode4',
},
{
id: 'SubTreeNode5',
},
{
id: 'SubTreeNode6',
},
{
id: 'SubTreeNode7',
},
{
id: 'SubTreeNode8',
},
{
id: 'SubTreeNode9',
},
{
id: 'SubTreeNode10',
},
{
id: 'SubTreeNode11',
},
],
};
const container = document.getElementById('container') as HTMLElement;
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const graph:TreeGraph = new G6.TreeGraph({
container: 'container',
width,
height,
linkCenter: true,
modes: {
default: [
{
type: 'collapse-expand',
},
'drag-canvas',
'zoom-canvas',
],
},
defaultNode: {
size: 30,
},
layout: {
type: 'compactBox',
direction: 'LR',
getId: function getId(d:any) {
return d.id;
},
getHeight: function getHeight() {
return 16;
},
getWidth: function getWidth() {
return 16;
},
getVGap: function getVGap() {
return 10;
},
getHGap: function getHGap() {
return 100;
},
},
});
graph.node(function (node) {
return {
size: 16,
anchorPoints: [
[0, 0.5],
[1, 0.5],
],
style: {
fill: '#C6E5FF',
stroke: '#5B8FF9',
},
label: node.id,
labelCfg: {
position: node.children && node.children.length > 0 ? 'left' : 'right',
offset: 5,
},
};
});
let i = 0;
graph.edge(function () {
i ;
return {
type: 'cubic-horizontal',
color: '#A3B1BF',
label: i,
};
});
graph.data(data);
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);
graph.data(data);
graph.render();
graph.fitView();
};
})
</script>
运行结果：
这是最简单的效果运行图，如果想要添加动画和好看的样式可以根据官方文档使用对应的API就可以了。
,
