代码布局如下图所示的1-4步：
主要代码：
// 1.css
.parentContent {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}// 2.标签
<!--设置parentContent的宽高为浏览器大小-->
<div class="parentContent" ref="parentContent">
<div id="container" ref="container"></div>
</div>// 3.data 变量
data () {
return {
data: {}, // 拓扑图数据
graph: undefined, // new G6
canvasWidth: 0, // 画布宽度
canvasHeight: 0 // 画布高度
}
},// 4.初始化画布大小
// todo 初始化画布宽高为div parentContent 的宽度和高度
this.canvasWidth = this.$refs.parentContent.clientWidth
this.canvasHeight = this.$refs.parentContent.clientHeight
this.graph = new G6.Graph({
container: 'container',
width: this.canvasWidth,
height: this.canvasHeight,
linkCenter: true,
plugins: [tooltip], // 配置 Tooltip 插件
modes: {
default: ['drag-canvas', 'zoom-canvas', 'drag-node'] // 允许拖拽画布、放缩画布、拖拽节点
},
layout: {
type: 'force',
preventOverlap: true, // 防止节点重叠
// 防碰撞必须设置nodeSize或size,否则不生效，由于节点的size设置了40，虽然节点不碰撞了，但是节点之间的距离很近，label几乎都挤在一起，所以又重新设置了大一点的nodeSize,这样效果会好很多
nodeSize: 100,
linkDistance: 150 // 指定边距离为150
},
defaultNode: { // 节点样式修改
type: 'image', // 设置节点为图片
size: [40, 40], // 节点大小
labelCfg: { // 修改节点label样式
style: {
fill: '#5B8FF9', // 字体颜色
fontSize: 14 // 字体大小
}
}
}
})// 5.浏览器窗口发生变化时，画布自适应窗口大小
/**
* 设置画布大小自适应
*/
initSize () {
const self = this // 因为箭头函数会改变this指向，指向windows。所以先把this保存
setTimeout(() => {
// todo 浏览器窗口发生变化时
window.onresize = function () {
// todo 获取div parentContent 的宽度和高度
this.canvasWidth = self.$refs.parentContent.clientWidth
this.canvasHeight = self.$refs.parentContent.clientHeight
// todo 修改画布的大小
self.graph.changeSize(this.canvasWidth, this.canvasHeight)
// todo 将图移动到画布中心位置
self.graph.fitCenter()
}
}, 20)
},效果如下图所示：
主要用到以下两个属性：
注：没有真正的找到画布大小自适应的方法，在官网中看到以上两种方式，就用它们写了自适应，这个相对echarts来说，是比较麻烦，echarts直接调用自带的一个resize()方法就可以实现画布大小自适应了
完整代码：
<template>
<!--设置parentContent的宽高为浏览器大小-->
<div class="parentContent" ref="parentContent">
<div id="container" ref="container"></div>
</div>
</template>
<script>
import G6 from '@antv/g6'
export default {
name: 'g6',
mounted () {
this.initComponent()
this.initSize()
},
data () {
return {
data: {}, // 拓扑图数据
graph: undefined, // new G6
canvasWidth: 0, // 画布宽度
canvasHeight: 0 // 画布高度
}
},
methods: {
/**
* 设置画布大小自适应
*/
initSize () {
const self = this // 因为箭头函数会改变this指向，指向windows。所以先把this保存
setTimeout(() => {
// todo 浏览器窗口发生变化时
window.onresize = function () {
// todo 获取div parentContent 的宽度和高度
this.canvasWidth = self.$refs.parentContent.clientWidth
this.canvasHeight = self.$refs.parentContent.clientHeight
// todo 修改画布的大小
self.graph.changeSize(this.canvasWidth, this.canvasHeight)
// todo 将图移动到画布中心位置
self.graph.fitCenter()
}
}, 20)
},
/**
* 创建G6，并对G6的一些设置
* */
initComponent () {
this.data = {
nodes: [
{
id: 'node1',
label: '采集服务器',
ip: '192.168.1.1',
status: 0
// 此处的key值一定不要出现type，如果出现type，图片修改无效
},
{
id: 'node2',
label: '数据库',
ip: '192.168.1.2',
status: 1
},
{
id: 'node3',
label: '终端',
ip: '192.168.1.3',
status: 2
},
{
id: 'node4',
label: '引擎',
ip: '192.168.1.4',
status: 0
},
{
id: 'node5',
label: '引擎5',
ip: '192.168.1.4',
status: 0
},
{
id: 'node6',
label: '引擎6',
ip: '192.168.1.4',
status: 2
},
{
id: 'node7',
label: '引擎7',
ip: '192.168.1.4',
status: 1
},
{
id: 'node8',
label: '引擎8',
ip: '192.168.1.4',
status: 2
},
{
id: 'node9',
label: '引擎9',
ip: '192.168.1.4',
status: 1
},
{
id: 'node10',
label: '引擎10',
ip: '192.168.1.4',
status: 0
}
],
edges: [
{
source: 'node1',
target: 'node2'
},
{
source: 'node1',
target: 'node3'
},
{
source: 'node1',
target: 'node4'
},
{
source: 'node4',
target: 'node5'
},
{
source: 'node1',
target: 'node6'
},
{
source: 'node6',
target: 'node7'
},
{
source: 'node7',
target: 'node8'
},
{
source: 'node1',
target: 'node8'
},
{
source: 'node2',
target: 'node9'
},
{
source: 'node3',
target: 'node10'
}
]
}
/**
* 遍历节点数据，给节点添加图片
*/
for (let i = 0, len = this.data.nodes.length; i < len; i++) {
// eslint-disable-next-line eqeqeq
if (this.data.nodes[i].status == 0) { // 'offlineAnomaly'
this.data.nodes[i].img = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F19100122420C335-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641970684&t=70b9b0b3a05f6ca5d56d6c4234fdd1fd'
}
// eslint-disable-next-line eqeqeq
if (this.data.nodes[i].status == 1) { // 'onlineAuth'
this.data.nodes[i].img = 'https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000'
}
// eslint-disable-next-line eqeqeq
if (this.data.nodes[i].status == 2) { // 'onlineAuth'
this.data.nodes[i].img = 'https://img0.baidu.com/it/u=3927459320,2138990686&fm=26&fmt=auto'
}
}
// todo 设置鼠标悬停显示详情操作
const tooltip = new G6.Tooltip({
offsetX: 70,
offsetY: 20,
getContent (e) {
const outDiv = document.createElement('div')
outDiv.style.width = '180px'
outDiv.innerHTML = `
<ul id="nodeDetails">
<li>名称: ${e.item.getModel().label}</li>
<li>IP: ${e.item.getModel().ip}</li>
<li>ID: ${e.item.getModel().id}</li>
<li>status: ${e.item.getModel().status}</li>
</ul>`
return outDiv
},
itemTypes: ['node']
})
// todo 初始化画布宽高为div parentContent 的宽度和高度
this.canvasWidth = this.$refs.parentContent.clientWidth
this.canvasHeight = this.$refs.parentContent.clientHeight
this.graph = new G6.Graph({
container: 'container',
width: this.canvasWidth,
height: this.canvasHeight,
linkCenter: true,
plugins: [tooltip], // 配置 Tooltip 插件
modes: {
default: ['drag-canvas', 'zoom-canvas', 'drag-node'] // 允许拖拽画布、放缩画布、拖拽节点
},
layout: {
type: 'force',
preventOverlap: true, // 防止节点重叠
// 防碰撞必须设置nodeSize或size,否则不生效，由于节点的size设置了40，虽然节点不碰撞了，但是节点之间的距离很近，label几乎都挤在一起，所以又重新设置了大一点的nodeSize,这样效果会好很多
nodeSize: 100,
linkDistance: 150 // 指定边距离为150
},
defaultNode: { // 节点样式修改
type: 'image', // 设置节点为图片
size: [40, 40], // 节点大小
labelCfg: { // 修改节点label样式
style: {
fill: '#5B8FF9', // 字体颜色
fontSize: 14 // 字体大小
}
}
}
})
// 接收数据并渲染
this.graph.data(this.data)
this.graph.render()
}
}
}
</script>
<style>
.parentContent {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
#nodeDetails {
list-style: none;
}
#nodeDetails > li {
padding: 5px 0;
text-align: left;
}
</style>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
