### Vue3 中使用 G6 图可视化库点击
节点获取信息
在 Vue3 中集成 AntV G6 并实现点击
节点获取其信息的功能，可以按照如下方式构建：
#### 安装依赖
首先确保安装了 `@antv/g6` 和其他必要的包。
```bash
npm install @antv/g6
```
#### 创建组件并初始化图表
创建一个新的 Vue 组件用于承载 G6 实例，并设置事件监听器以处理
节点点击事件。下面是一个完整的示例代码片段：
```javascript
<template>
<div ref="container" style="width: 100%; height: 80vh;"></div>
</template>
<script setup lang="
ts">
import { onMounted, ref } from 'vue';
import G6 from '@antv/g6';
const container = ref(null);
onMounted(() => {
const graph = new G6.Graph({
container: container.value,
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight * 0.8,
modes: {
default: ['drag-canvas'],
},
layout: {
type: 'dagre',
}
});
// 添加数据源
const data = {
nodes: [
{ id: 'node-1', label: 'Node 1' },
{ id: 'node-2', label: 'Node 2' }
],
edges: [{ source: 'node-1', target: 'node-2' }]
};
graph.data(data);
graph.render();
// 注册点击事件处理器
graph.on('node:click', (evt) => {
const clickedNodeId = evt.item.getID();
const nodeInfo = graph.findById(clickedNodeId).getModel(); //
获取被点击
节点的数据模型
console.log('Clicked Node Info:', nodeInfo); // 打印日志以便调试
alert(`您选择了 ${nodeInfo.label}
节点`);
// 可选操作：打开新窗口或执行其他逻辑
window.open(`https://www.baidu.com/?wd=${encodeURIComponent(nodeInfo.label)}`, '_blank');
});
});
</script>
```
上述代码展示了如何配置 G6 的实例化参数、加载基础结构（即
节点和边）、注册响应函数来捕获用户的交互行为——特别是当用户单击某个特定
节点时触发的动作[^1]。
扫一扫
525
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
