官网地址: 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,必须,起始点 id
target: '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:typedef
render() {
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);
};