Vue正交树状图组件

一、组件概述这是一个基于AntV G6构建的正交树状图组件思维导图/组织结构图风格用于展示层级化的知识体系结构。采用从左到右的横向布局节点以矩形卡片形式呈现适合展示较深的树形结构。二、核心功能2.1 交互功能功能说明节点展开/折叠点击非叶子节点切换子节点显隐节点选中点击叶子节点触发右侧编辑面板画布拖拽支持拖拽移动视图缩放支持鼠标滚轮缩放悬停效果鼠标悬停时节点高亮自动适配自动适应容器大小和视图2.2 视觉特性节点样式圆角矩形卡片尺寸 133×32px图标系统根据节点类型显示不同图标知识模块 → 圆形图标知识单元 → 六边形图标知识点 → 五边形图标属性 → 菱形图标根节点 → 无图标颜色体系第一级子节点使用预设颜色数组更深层级基于父节点颜色逐级提亮增加亮度 20%/级标签样式根节点标签居中显示白色加粗字体第1-3级白色加粗字体第4级及以上黑色普通字体保证可读性标签宽度超过 100px 时自动调整偏移连线样式三次贝塞尔曲线水平方向颜色继承目标节点颜色三、数据结构输入格式javascript[ { id: 唯一标识, name: 节点名称, type: 节点类型, // 知识模块/知识单元/知识点/属性 labels: [], // 附加标签 children: [] // 子节点数组 } ]G6 内部数据格式javascript{ id: 节点ID, name: 节点名称, data: { id: 节点ID, route: [0, 1, 2], // 节点路径索引 type: 节点类型, labels: [] }, children: [...], style: { collapsed: true/false } // 折叠状态 }四、核心方法方法作用createChildren()递归创建子节点数据记录路由信息getRootNode()获取并包装根节点数据renderTree()初始化/渲染 G6 树图selectNode()处理节点选中逻辑getCollapsedState()获取节点折叠状态持久化setCollapsedState()保存节点折叠状态到 Store五、自定义节点MindNode继承自 Rectjavascriptclass MindNode extends Rect { render(attributes, container) { super.render(attributes, container); // 渲染图标知识模块/单元/知识点/属性 // 位置矩形左侧 5px垂直居中 } }节点配置配置项值说明size[133, 32]节点宽高radius8圆角半径labelPlacementcenter(根) /left(其他)标签位置labelMaxWidth100标签最大宽度labelFontSize10标签字号labelOffsetX动态计算根据文字宽度调整偏移六、事件机制6.1 节点点击javascriptgraph.on(node:click, async (evt) { const hasChildren node.children?.length 0; if (hasChildren) { // 非叶子节点展开/折叠 if (isCollapsed) { await graph.expandElement(nodeId, true); } else { await graph.collapseElement(nodeId, true); } } else { // 叶子节点聚焦并触发编辑面板 await graph.focusElement(nodeId, true); selectNode(node.data); } });6.2 悬停效果鼠标悬停时改变光标为pointer节点激活样式外发光haloLineWidth: 5七、布局配置参数值说明typemindmap思维导图布局directionLR从左到右getVGap15垂直间距getHGap100水平间距八、状态管理折叠状态持久化javascript// 存储在 Vuex 中 treeCollapsedState: { 节点ID: true, // true折叠, false展开 节点ID2: false }节点状态样式状态效果默认圆角矩形 图标 文字悬停激活外发光5px选中描边 外发光10px 描边宽度2px九、颜色处理颜色数组javascript[#17B630, #1C91E5, #00B680, #556DE5, #275BC4, #755FE5, #F66950, #E56098, #E56E6E, #E56082, #FF7862, #42BCE5, #74EEB7, #FDB603]颜色计算规则第一级子节点COLORS[route[1] % COLORS.length]更深层级lightenColor(levelColor, 0.2 * (route.length - 2))每加深一级颜色亮度增加 20%确保层级视觉区分度十、生命周期javascriptonMounted(() { renderTree(); // 初始化渲染 }); watch(graphData, () { renderTree(); // 数据变化时重新渲染 }, { deep: true }); onBeforeUnmount(() { if (graph) { graph.destroy(); // 组件销毁时清理实例 graph null; } });十一、容器样式css.tree-box { position: absolute; width: 100%; height: 100%; } .tree-graph { width: 100%; height: 100%; }绝对定位占满父容器G6 画布自动适配容器尺寸十二、使用注意事项根节点不参与折叠状态根节点始终展开图标资源路径需确保/static/images/knowledgeGraph/下有对应 SVG 文件G6 版本基于antv/g6需确保已安装内存清理组件销毁时自动销毁 G6 实例防止内存泄漏深色背景文字第4级及以上节点自动切换为黑色文字十三、应用场景知识体系目录树组织架构图产品分类导航文档目录结构学习路线图十四、与径向图的对比特性径向图正交图本组件布局方式辐射状横向树状节点形状几何形状圆角矩形标签位置节点内部节点右侧适用深度建议 ≤5 层可支持更深层级空间利用中心密集外围稀疏均匀分布视觉效果环形适合展示层级关系思维导图风格