官网地址： https://antv-g6.gitee.io/zh/docs/manual/introduction
此时的官网版本： 4.2.0
我的angular版本： 11

引入

在项目中引入 G6 有以下两种方式：NPM 引入；CDN 引入。

1、在项目中使用 NPM 包引入

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

npm install --save @antv/g6

提示：使用案例时，若拷贝官方代码，就要
npm install insert-css --save
npm i --save-dev @types/insert-css
自己写样式也行的

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

import G6 from '@antv/g6';
// 或
import * as G6 from '@antv/g6';

2、 在 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} 中填写版本号，例如 3.7.1；
最新版可以在 NPM 查看最新版本及版本号；
详情参考 Github 分支：https://github.com/antvis/g6/tree/master。

我用的第一种方式

快速试用

创建一个 G6 的关系图仅需要下面几个步骤：

创建关系图的 HTML 容器；
数据准备；
创建关系图；
配置数据源，渲染。

Step 1 创建容器

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

<div id="mountNode"></div>

Step 2 数据准备

引入 G6 的数据源为 JSON 格式的对象。该对象中需要有节点（nodes）和边（edges）字段，分别用数组表示：

const data = {// 点集nodes: [{id: 'node1', // String，该节点存在则必须，节点的唯一标识x: 100, // Number，可选，节点位置的 x 值y: 200, // Number，可选，节点位置的 y 值},{id: 'node2', // String，该节点存在则必须，节点的唯一标识x: 300, // Number，可选，节点位置的 x 值y: 200, // Number，可选，节点位置的 y 值},],// 边集edges: [{source: 'node1', // String，必须，起始点 idtarget: 'node2', // String，必须，目标点 id},],
};

注意

1、nodes 数组中包含节点对象。每个节点对象中唯一的、必要的 id 以标识不同的节点，x、 y 指定该节点的位置；
2、edges 数组中包含边对象。source 和 target 是每条边的必要属性，分别代表了该边的起始点 id 与 目标点 id。
2、点和边的其他属性参见链接：内置节点 和 内置边。

Step 3 创建关系图

创建关系图（实例化）时，至少需要为图设置容器、宽和高。

const graph = new G6.Graph({container: 'mountNode', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身width: 800, // Number，必须，图的宽度height: 500, // Number，必须，图的高度
});

Step 4 配置数据源，渲染

graph.data(data); // 读取 Step 2 中的数据源到图上
graph.render(); // 渲染图

最终结果

完整代码

    /* 图的画布容器 */<div #mountNode></div>

import { Component, OnInit, ViewChild } from '@angular/core';
import G6 from '@antv/g6';// 获取容器
@ViewChild('mountNode', { static: false }) mountNode!: any;// 用定时器， 留出100ms的时间，等待html渲染完，再加载图ngAfterViewInit(): void {setTimeout(() => { this.render(); }, 100);}// tslint:disable-next-line:typedefrender() {console.log(123);const data = {// 点集nodes: [{id: 'node1',x: 100,y: 200,},{id: 'node2',x: 300,y: 200,},],// 边集edges: [// 表示一条从 node1 节点连接到 node2 节点的边{source: 'node1',target: 'node2',},],};// 测试 是否拿到了 容器console.log(this.mountNode.nativeElement);// 创建 G6 图实例const graph = new G6.Graph({container: this.mountNode.nativeElement, // 指定图画布的容器 id// 画布宽高width: 800,height: 500,});// 读取数据graph.data(data);// 渲染图graph.render();}

问题来了

报错了，气人

解决办法：

又去看了官网：
地址： https://antv-g6.gitee.io/zh/docs/manual/FAQ/angular-support

可问题报错的描述不太一样，看了他推荐的GitHub问题讨论，有了一个解决方法：
在配置文件里，添加："skipLibCheck": true
添加之后，可以推断类型，项目编译不再报错（别人解释的，我也不懂什么意思）

gitHub里说，他配置了这个之后，才出现了官网的这种报错
接下来按官网的解决办法就好

.browserslistrc文件我没动，他自己生成的

需要ie支持的话，就npm，我没有npm

结果

这一系列走完后的结果：

感觉可真是太不容易了！！！！

扩展

可以在codeSandBox里测试完图在放到自己的项目里，


这里放个流程图的示例：

把这段代码直接替换codeSandBox 里index.js的全部，就可以得到这个图

import G6 from '@antv/g6';
import insertCss from 'insert-css';// 我们用 insert-css 演示引入自定义样式
// 推荐将样式添加到自己的样式文件中
// 若拷贝官方代码，别忘了 npm install insert-css
insertCss(`.g6-tooltip {border-radius: 6px;font-size: 12px;color: #fff;background-color: #000;padding: 2px 8px;text-align: center;}
`);const data = {nodes: [{id: '1',dataType: 'alps',name: '董事长',conf: [{label: '姓名',value: '刘烨',},{label: '性别',value: '男',},{label: '职责',value: '统筹一切',},],},{id: '2',dataType: 'alps',name: '总经理',conf: [{label: '姓名',value: '张一凡',},{label: '性别',value: '女',},{label: '职责',value: '计划策略的制定',},],},{id: '3',dataType: 'sql',name: '设计部',conf: [{label: 'conf',value: 'pai_graph.conf',},{label: 'dot',value: 'pai_graph.dot',},{label: 'init',value: 'init.rc',},],},{id: '4',dataType: 'sql',name: '工程技术',conf: [{label: 'conf',value: 'pai_graph.conf',},{label: 'dot',value: 'pai_graph.dot',},{label: 'init',value: 'init.rc',},],},{id: '5',dataType: 'sql',name: '财务部',conf: [{label: 'conf',value: 'pai_graph.conf',},{label: 'dot',value: 'pai_graph.dot',},{label: 'init',value: 'init.rc',},],},{id: '6',dataType: 'sql',name: '经营部',conf: [{label: 'conf',value: 'pai_graph.conf',},{label: 'dot',value: 'pai_graph.dot',},{label: 'init',value: 'init.rc',},],},{id: '7',dataType: 'sql',name: '项目部1',conf: [{label: 'conf',value: 'pai_graph.conf',},{label: 'dot',value: 'pai_graph.dot',},{label: 'init',value: 'init.rc',},],},{id: '8',dataType: 'sql',name: '项目部2',conf: [{label: 'conf',value: 'pai_graph.conf',},{label: 'dot',value: 'pai_graph.dot',},{label: 'init',value: 'init.rc',},],},{id: '9',dataType: 'sql',name: '材料员',conf: [{label: 'conf',value: 'pai_graph.conf',},{label: 'dot',value: 'pai_graph.dot',},{label: 'init',value: 'init.rc',},],},{id: '10',dataType: 'sql',name: '技术员',conf: [{label: 'conf',value: 'pai_graph.conf',},{label: 'dot',value: 'pai_graph.dot',},{label: 'init',value: 'init.rc',},],},{id: '11',dataType: 'sql',name: '工长',conf: [{label: 'conf',value: 'pai_graph.conf',},{label: 'dot',value: 'pai_graph.dot',},{label: 'init',value: 'init.rc',},],},{id: '12',dataType: 'sql',name: '安全员',conf: [{label: 'conf',value: 'pai_graph.conf',},{label: 'dot',value: 'pai_graph.dot',},{label: 'init',value: 'init.rc',},],},{id: '13',dataType: 'sql',name: '施工员',conf: [{label: 'conf',value: 'pai_graph.conf',},{label: 'dot',value: 'pai_graph.dot',},{label: 'init',value: 'init.rc',},],},{id: '14',dataType: 'sql',name: '质检员',conf: [{label: 'conf',value: 'pai_graph.conf',},{label: 'dot',value: 'pai_graph.dot',},{label: 'init',value: 'init.rc',},],},{id: '15',dataType: 'sql',name: '资料员',conf: [{label: 'conf',value: 'pai_graph.conf',},{label: 'dot',value: 'pai_graph.dot',},{label: 'init',value: 'init.rc',},],},],// 这里是node数据关系之间的连线关系edges: [{source: '1',target: '2',},{source: '2',target: '3',},{source: '2',target: '4',},{source: '2',target: '5',},{source: '2',target: '6',},{source: '3',target: '7',},{source: '6',target: '8',},{source: '7',target: '9',},{source: '7',target: '10',},{source: '7',target: '11',},{source: '8',target: '12',},{source: '8',target: '13',}, {source: '8',target: '14',}, {source: '8',target: '15',},],
};G6.registerNode('sql',{drawShape(cfg, group) {const rect = group.addShape('rect', {// 对图中 矩形 进行样式设定attrs: {// 这个x、y是干嘛的x: -75,y: -25,// 框的宽、高、圆角width: 150,height: 50,radius: 10,// 框的颜色stroke: '#5B8FF9',// 框的填充色fill: '#C6E5FF',// 框的粗细lineWidth: 3,},name: 'rect-shape',});if (cfg.name) {group.addShape('text', {attrs: {text: cfg.name,// 这个x、y不太明白干嘛的x: 0,y: 0,// 字体颜色fill: '#00287E',// 字体大小fontSize: 23,// 对齐方式textAlign: 'center',// 垂直居中textBaseline: 'middle',// 字体加粗fontWeight: 'bold',},name: 'text-shape',});}return rect;},},'single-node',
);const container = document.getElementById('container');
const width = 800;
const height = 800;
const graph = new G6.Graph({container: 'container',width,height,layout: {type: 'dagre',// 线的高度ranksep: 60,controlPoints: true,},defaultNode: {type: 'sql',},defaultEdge: {type: 'polyline',style: {// 线的弧度radius: 20,offset: 45,// 箭头endArrow: true,lineWidth: 2,stroke: '#000',},},nodeStateStyles: {selected: {stroke: '#d9d9d9',fill: '#5394ef',},},modes: {// 加上这个可以用鼠标来移动default: ['drag-canvas','zoom-canvas','click-select',{type: 'tooltip',formatText(model) {const cfg = model.conf;const text = [];cfg.forEach((row) => {text.push(row.label + ':' + row.value + '<br>');});return text.join('\n');},offset: 30,},],},fitView: true,
});
graph.data(data);
graph.render();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);};