从审批流到组织架构：用AntV X6 1.x 在Vue里打造一个可交互的业务图表

从审批流到组织架构用AntV X6 1.x 在Vue里打造可交互的业务图表当我们需要在后台管理系统中实现复杂的业务流程可视化时简单的静态图表往往难以满足需求。AntV X6作为专业的图编辑引擎配合Vue框架能够帮助我们构建出既美观又实用的交互式业务图表。本文将带你从零开始实现一个完整的审批流程可视化组件并探讨如何将其扩展应用到组织架构等更多业务场景中。1. 环境准备与基础配置在开始之前我们需要确保开发环境配置正确。与简单的流程图不同业务图表往往需要处理更复杂的数据结构和交互逻辑。首先安装必要的依赖yarn add antv/x61.34.6 dagre insert-css这里我们选择X6的1.x版本主要考虑两点一是1.x版本文档和社区资源更丰富二是2.x版本API变化较大对于业务项目来说稳定性更为重要。创建一个基础的Vue组件框架template div idcontainer refcontainer/div /template script setup import { Graph } from antv/x6 import dagre from dagre import insertCss from insert-css import { onMounted, onUnmounted } from vue let graph null onMounted(() { initGraph() }) onUnmounted(() { graph?.dispose() }) /script2. 构建业务节点与连线业务图表的核心在于如何将业务实体映射为可视化元素。以审批流程为例我们需要考虑节点类型审批人、条件分支等节点状态待处理、已通过、已拒绝节点属性审批人信息、审批时限等2.1 自定义业务节点Graph.registerNode(approval-node, { width: 180, height: 60, markup: [ { tagName: rect, attrs: { class: body, rx: 4, ry: 4, fill: #FFFFFF, stroke: #5F95FF, strokeWidth: 1 } }, { tagName: text, attrs: { class: label, fill: #333, fontSize: 12, refX: 0.5, refY: 0.5, textAnchor: middle, textVerticalAnchor: middle } }, { tagName: image, attrs: { class: avatar, width: 24, height: 24, refX: 10, refY: 18 } } ], attrs: { .body: { refWidth: 100%, refHeight: 100% } } })2.2 动态样式绑定业务图表通常需要根据数据状态动态改变外观function updateNodeStyle(node, status) { const statusColor { pending: #FFD700, approved: #52C41A, rejected: #F5222D } node.attr({ .body: { stroke: statusColor[status] || #5F95FF }, .label: { text: ${node.data.name} (${status}) } }) }3. 实现业务交互功能静态图表只是开始真正的价值在于丰富的交互体验。我们需要实现以下功能节点点击查看详情右键上下文菜单状态变更实时反馈连线上的操作按钮3.1 节点点击事件graph.on(node:click, ({ node }) { const nodeData node.data // 在实际项目中这里可以触发模态框显示详细信息 console.log(点击节点:, nodeData) // 模拟审批通过操作 if (nodeData.status pending) { node.data.status approved updateNodeStyle(node, approved) } })3.2 右键菜单实现graph.on(node:contextmenu, ({ node, e }) { e.preventDefault() const menuItems [ { label: 查看详情, action: view }, { label: 转交审批, action: transfer }, { label: 加急处理, action: urgent } ] // 实际项目中应渲染自定义菜单组件 console.log(可操作项:, menuItems) })4. 数据绑定与自动布局业务图表需要与实际业务数据紧密绑定同时保持良好的可视化效果。4.1 从API加载数据async function loadApprovalData() { // 模拟API请求 const response await fetch(/api/approval-flow) const data await response.json() const nodes data.steps.map(step { return graph.createNode({ shape: approval-node, id: step.id, data: step, position: { x: 0, y: 0 }, // 布局算法会重新定位 attrs: { .label: { text: step.name }, .avatar: { xlinkHref: step.avatar } } }) }) const edges [] for (let i 1; i nodes.length; i) { edges.push( graph.createEdge({ shape: approval-edge, source: { cell: nodes[i-1].id }, target: { cell: nodes[i].id } }) ) } graph.resetCells([...nodes, ...edges]) applyDagreLayout() }4.2 自动布局优化function applyDagreLayout() { const dagreGraph new dagre.graphlib.Graph() dagreGraph.setGraph({ rankdir: LR, nodesep: 50, ranksep: 70 }) dagreGraph.setDefaultEdgeLabel(() ({})) graph.getNodes().forEach(node { dagreGraph.setNode(node.id, { width: node.getSize().width, height: node.getSize().height }) }) graph.getEdges().forEach(edge { dagreGraph.setEdge(edge.getSourceCellId(), edge.getTargetCellId()) }) dagre.layout(dagreGraph) graph.freeze() dagreGraph.nodes().forEach(id { const node graph.getCell(id) if (node) { const pos dagreGraph.node(id) node.position(pos.x, pos.y) } }) graph.unfreeze() }5. 扩展应用组织架构图同样的技术可以应用于组织架构可视化只需调整节点设计和数据映射方式。5.1 组织架构节点设计Graph.registerNode(org-node, { width: 220, height: 80, markup: [ { tagName: rect, attrs: { class: card, rx: 8, ry: 8, fill: #FAFAFA, stroke: #D9D9D9 } }, { tagName: image, attrs: { class: avatar, width: 48, height: 48, x: 16, y: 16 } }, { tagName: text, attrs: { class: name, x: 80, y: 35, fontSize: 14, fontWeight: bold } }, { tagName: text, attrs: { class: title, x: 80, y: 55, fontSize: 12 } } ] })5.2 组织架构数据映射function renderOrgChart(orgData) { const nodes orgData.employees.map(emp { return graph.createNode({ shape: org-node, id: emp.id, data: emp, attrs: { .avatar: { xlinkHref: emp.avatar }, .name: { text: emp.name }, .title: { text: emp.title } } }) }) const edges orgData.reportsTo .filter(report report.from report.to) .map(report { return graph.createEdge({ shape: org-edge, source: { cell: report.from }, target: { cell: report.to } }) }) graph.resetCells([...nodes, ...edges]) applyOrgLayout() }6. 性能优化与调试技巧随着业务数据量增加性能问题会逐渐显现。以下是一些实用优化建议按需渲染只渲染可视区域内的节点简化图形大数据量时使用简化版的节点样式批量操作使用graph.freeze()和graph.unfreeze()包裹批量更新事件节流对频繁触发的事件进行节流处理// 视口内可见性检测 function isNodeVisible(node) { const bbox node.getBBox() const viewport graph.getClientRect() return !( bbox.x viewport.x viewport.width || bbox.x bbox.width viewport.x || bbox.y viewport.y viewport.height || bbox.y bbox.height viewport.y ) }在开发过程中可以利用X6提供的调试工具// 开启调试模式 graph.enableDebug() // 查看节点状态 console.log(graph.getNodes().map(n n.getData()))