Vue2项目实战：用AntV G6打造可折叠树形结构（附完整代码）

Vue2与AntV G6深度整合：构建企业级可交互树形可视化方案

在数据密集型的现代Web应用中，树形结构可视化已成为组织架构展示、文件目录管理、决策流程分析等场景的核心需求。本文将基于Vue2框架与AntV G6可视化引擎，从工程化角度完整呈现一个支持动态折叠展开、节点自定义渲染的企业级树形结构解决方案。

1. 环境搭建与基础配置

1.1 初始化Vue2项目

首先确保已安装Node.js环境（建议版本12+），通过Vue CLI创建项目：

npm install -g @vue/cli vue create g6-tree-demo cd g6-tree-demo

安装AntV G6核心库及扩展插件：

npm install @antv/g6 @antv/hierarchy --save

1.2 基础组件结构

创建TreeGraph.vue组件文件，建立基础DOM结构和引入逻辑：

<template> <div class="tree-container"> <div ref="graphContainer" :style="{ height: containerHeight + 'px' }"></div> </div> </template> <script> import G6 from '@antv/g6' import { TreeGraph } from '@antv/g6' export default { name: 'TreeGraph', props: { treeData: { type: Object, required: true } }, data() { return { graph: null, containerHeight: 500 } }, mounted() { this.initGraph() } } </script>

2. 数据规范与预处理

2.1 标准树形数据结构

AntV G6要求的树形数据格式如下：

{ id: 'root', label: '根节点', children: [ { id: 'child1', label: '子节点1', children: [...] } ] }

2.2 数据清洗策略

实际业务数据往往需要转换处理，推荐使用以下工具方法：

methods: { normalizeTreeData(rawData) { const processNode = (node) => { if (!node) return null return { id: node.id || Math.random().toString(36).substr(2, 9), label: node.name || node.title || '未命名节点', children: Array.isArray(node.children) ? node.children.map(processNode).filter(Boolean) : [], ...node // 保留原始属性 } } return processNode(rawData) } }

3. 核心可视化实现

3.1 图形实例化配置

在initGraph方法中配置TreeGraph的核心参数：

initGraph() { this.graph = new TreeGraph({ container: this.$refs.graphContainer, width: this.$el.clientWidth, height: this.containerHeight, modes: { default: ['drag-node'] }, defaultNode: { type: 'custom-node', size: [120, 40], style: { fill: '#F6F9FE', stroke: '#CED4DA' } }, defaultEdge: { type: 'cubic-horizontal', style: { stroke: '#ADB5BD', lineWidth: 2 } }, layout: { type: 'dendrogram', direction: 'TB', nodeSep: 50, rankSep: 100 } }) }

3.2 自定义节点渲染

实现带折叠控制的自定义节点：

G6.registerNode('custom-node', { draw(cfg, group) { const rect = group.addShape('rect', { attrs: { x: 0, y: 0, width: cfg.size[0], height: cfg.size[1], radius: 4, fill: cfg.style.fill, stroke: cfg.style.stroke } }) // 节点文本 group.addShape('text', { attrs: { text: cfg.label, x: cfg.size[0] / 2, y: cfg.size[1] / 2, textAlign: 'center', textBaseline: 'middle', fill: '#495057' } }) // 折叠控制按钮 if (cfg.children && cfg.children.length > 0) { const marker = group.addShape('marker', { attrs: { x: cfg.size[0] - 15, y: cfg.size[1] / 2, r: 6, symbol: cfg.collapsed ? this.expandIcon : this.collapseIcon, stroke: '#868E96' }, name: 'collapse-icon' }) marker.on('click', evt => { evt.stopPropagation() this.toggleCollapse(cfg.id) }) } return rect }, collapseIcon(x, y, r) { return [ ['M', x - r, y], ['L', x + r, y], ['M', x, y - r], ['L', x, y + r] ] }, expandIcon(x, y, r) { return [ ['M', x - r, y], ['L', x + r, y] ] } }, 'single-shape')

4. 高级功能实现

4.1 动态折叠展开

实现节点状态管理功能：

methods: { toggleCollapse(nodeId) { const node = this.graph.findById(nodeId) const model = node.getModel() this.graph.updateItem(node, { collapsed: !model.collapsed }) // 自动调整布局 setTimeout(() => { this.graph.layout() this.graph.fitView() }, 100) } }

4.2 响应式容器

添加窗口大小变化的响应处理：

mounted() { this.initGraph() window.addEventListener('resize', this.handleResize) }, beforeDestroy() { window.removeEventListener('resize', this.handleResize) }, methods: { handleResize() { if (this.graph) { this.graph.changeSize( this.$el.clientWidth, this.containerHeight ) this.graph.fitView() } } }

4.3 性能优化策略

针对大型树结构的优化方案：

initGraph() { this.graph = new TreeGraph({ // ...其他配置 renderer: 'svg', // 使用SVG渲染器 animate: false, // 关闭动画 groupByTypes: false }) // 启用虚拟渲染 this.graph.get('canvas').set('localRefresh', false) }

5. 企业级应用实践

5.1 复杂节点样式设计

实现带状态标识的业务节点：

G6.registerNode('biz-node', { draw(cfg, group) { const baseRect = group.addShape('rect', { attrs: { x: 0, y: 0, width: 160, height: 60, radius: 4, fill: this.getStatusColor(cfg.status), stroke: '#DEE2E6' } }) // 状态标识 group.addShape('rect', { attrs: { x: 0, y: 0, width: 4, height: 60, fill: this.getStatusAccent(cfg.status) } }) // 主文本 group.addShape('text', { attrs: { text: cfg.label, x: 10, y: 20, textAlign: 'left', fill: '#343A40', fontSize: 14 } }) // 副文本 group.addShape('text', { attrs: { text: cfg.desc || '', x: 10, y: 40, textAlign: 'left', fill: '#868E96', fontSize: 12 } }) }, getStatusColor(status) { const map = { normal: '#E6F7FF', warning: '#FFF7E6', error: '#FFF1F0' } return map[status] || '#F8F9FA' } })

5.2 与Vue状态管理集成

结合Vuex实现状态同步：

computed: { processedData() { return this.normalizeTreeData(this.$store.state.treeData) } }, watch: { processedData: { handler(newVal) { if (this.graph) { this.graph.changeData(newVal) } }, deep: true } }

在项目实际落地过程中，我们发现树形结构的性能瓶颈主要出现在节点数量超过500+时。通过实现动态加载子节点的策略，可以有效解决大规模数据渲染问题。具体实现时，可以监听节点展开事件，动态请求子节点数据并更新图形。