vue3js使用AntV自定义节点

### 创建自定义节点 在 Vue 3 中使用 AntV 库创建自定义节点涉及几个重要步骤。为了实现这一目标，首先需要安装必要的依赖项并初始化项目环境。 #### 安装依赖项 确保已经安装了 `@antv/g6` 和其他所需的包： ```bash npm install @antv/g6 vue@next ``` #### 初始化 G6 实例 在组件内部引入 G6 并配置基本设置来启动图表实例[^1]。 ```javascript import { onMounted } from 'vue'; import * as G6 from '@antv/g6'; export default { setup() { let graph; const initGraph = () => { graph = new G6.Graph({ container: 'mountNode', // DOM容器ID width: window.innerWidth, height: window.innerHeight, modes: { default: ['drag-canvas'], }, defaultNode: { type: 'custom-node' // 自定义节点类型名称 } }); registerCustomNode(); graph.data(data); graph.render(); }; onMounted(() => { initGraph(); }); return {}; } }; ``` #### 注册自定义节点 通过扩展默认的圆形或矩形节点样式来自定义节点外观。这可以通过重写 `draw` 方法完成，在其中可以指定 SVG 路径或其他图形属性。 ```javascript function registerCustomNode() { G6.registerNode('custom-node', { draw(cfg, group) { const rect = group.addShape('rect', { attrs: { x: -cfg.size / 2, y: -cfg.size / 2, width: cfg.size, height: cfg.size, fill: '#C6E5FF', stroke: '#5B8FF9' } }); if (cfg.label) { group.addShape('text', { attrs: { text: cfg.label, fontSize: 12, fill: '#000', textAlign: 'center', textBaseline: 'middle', x: 0, y: 0 } }); } return rect; } }); } ``` 上述代码展示了如何注册一个新的名为 `'custom-node'` 的节点类型，并为其设置了特定的颜色填充、描边以及标签显示逻辑。当数据集中指定了该类型的节点时，G6 将自动应用这些样式规则。