翻文档的时候，无意间发现tooltip提示框的用法，用来做鼠标悬停显示详情的操作。
鼠标悬停在节点上时，效果如下图所示：
代码布局如下：
主要代码：
const tooltip = new G6.Tooltip({offsetX: 70,offsetY: 20,getContent (e) {const outDiv = document.createElement('div')outDiv.style.width = '180px'outDiv.innerHTML = `<ul><li>名称: ${e.item.getModel().label}</li><li>IP: ${e.item.getModel().ip}</li><li>ID: ${e.item.getModel().id}</li></ul>`return outDiv},itemTypes: ['node']})
plugins: [tooltip], // 配置 Tooltip 插件
当然，默认的样式有一点点丑，可以稍微修改一下样式，效果如下：
完整代码：
<template><div><div id="container"></div></div></template><script>import G6 from '@antv/g6'export default {name: 'g6',mounted () {this.initComponent()},data () {return {data: {}, // 拓扑图数据graph: undefined // new G6}},methods: {/*** 创建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}],edges: [{source: 'node1',target: 'node2'},{source: 'node1',target: 'node3'},{source: 'node1',target: 'node4'}]}/*** 遍历节点数据，给节点添加图片*/for (let i = 0, len = this.data.nodes.length; i < len; i++) {// eslint-disable-next-line eqeqeqif (this.data.nodes[i].status == 0) { // 'offlineAnomaly'this.data.nodes[i].img = '/image_search/src=http%3A%2F%%2Fup%2Fallimg%2Ftp05%2F19100122420C335-0-lp.jpg&refer=http%3A%2F%&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641970684&t=70b9b0b3a05f6ca5d56d6c4234fdd1fd'}// eslint-disable-next-line eqeqeqif (this.data.nodes[i].status == 1) { // 'onlineAuth'this.data.nodes[i].img = '/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000'}// eslint-disable-next-line eqeqeqif (this.data.nodes[i].status == 2) { // 'onlineAuth'this.data.nodes[i].img = '/it/u=3927459320,2138990686&fm=26&fmt=auto'}}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></ul>`return outDiv},itemTypes: ['node']})this.graph = new G6.Graph({container: 'container',width: 800,height: 800,plugins: [tooltip], // 配置 Tooltip 插件layout: {type: 'force',preventOverlap: true, // 防止节点重叠// 防碰撞必须设置nodeSize或size,否则不生效，由于节点的size设置了40，虽然节点不碰撞了，但是节点之间的距离很近，label几乎都挤在一起，所以又重新设置了大一点的nodeSize,这样效果会好很多nodeSize: 100,linkDistance: 150 // 指定边距离为150},defaultNode: { // 节点样式修改type: 'image', // 设置节点为图片size: [40, 40] // 节点大小},modes: {default: ['drag-canvas', 'zoom-canvas', 'drag-node'] // 允许拖拽画布、放缩画布、拖拽节点}})this.graph.data(this.data)this.graph.render()}}}</script><style>#nodeDetails {list-style: none;}#nodeDetails>li {padding:5px 0;text-align: left;}</style>
文档地址
