BOM（物料清单）是制造业的"家谱"：一台整机由多个部件组成，每个部件又拆成子件，层层向下，直到最底层的原材料。问题是，这张"家谱"往往有好几层、成千上万行，传统表格把父子关系压成一行行的缩进，层级一深就彻底糊掉——你很难一眼看出"这台机器的成本大头在哪一层"，更别说"缺哪个零件会让整条线停摆"。

。BOM 是天然的有向树（严格说是森林，因为一个产品可能有多个子装配体），用树图负责"看清层级路径"，用旭日图负责"看清占比构成"，两者联动，既见树木也见森林。本文从数据建模讲到两套可视化组件的对接，给出可运行的 JavaScript 代码，并说明交互细节与性能边界。

 子件，子件又有自己的子件，递归展开就成树。每一层都带数量、单位、成本等属性，这些属性决定了这棵树"怎么用"——不是单纯展示，而是要回答业务问题。 

图 1：一个典型 BOM 层级示意——整机向下逐层拆解，最深路径可达五六层。

表格处理这种结构有三个硬伤：层级靠缩进，人眼无法快速判断"谁是谁的孩子"；成本需要逐级汇总，容易算错；占比比较要横向找列，跨层级几乎无法比较。换成树图，层级由空间位置直接表达；换成旭日图，占比由弧长直接表达——这就是可视化带来的认知降维。

二、数据建模：把扁平行转成树 

BOM 数据在数据库里通常是扁平的父子关系行（每行一条 

），前端要渲染树图、旭日图，必须先

。这一步看似简单，却是联动交互的地基。 

// 将扁平的 BOM 关系行转换成嵌套树
function buildBOMTree(rows, rootId) {
  const map = new Map();
  rows.forEach(r => map.set(r.id, { ...r, children: [] }));

  const roots = [];
  rows.forEach(r => {
    const node = map.get(r.id);
    if (r.parentId && map.has(r.parentId)) {
      // 挂到父节点的 children，同时累加本层成本
      map.get(r.parentId).children.push(node);
      map.get(r.parentId).cost +=
        node.cost * (node.quantity || 1);
    } else {
      roots.push(node);
    }
  });
  return roots.find(n => n.id === rootId) || roots[0];
}

一个常见坑：成本累加必须在构建完树之后

（上面的写法只在父先于子出现时才对）。更稳妥的做法是构建完树后做一次后序遍历（先算完子节点再汇总父节点），确保深层成本一定被计入。 

三、树图：看清路径，支持折叠展开 

把 BOM 的层级画清楚。Graphin / G6 的树图布局天然支持节点的展开与折叠，正好对应 BOM "钻取"的交互需求——默认收起深层，点击节点再展开。 

import Graphin, { TreeGraph } from '@antv/graphin';

function BOMTree({ data }) {
  const treeData = buildBOMTree(data, 'product-001');

  return (
    <TreeGraph
      data={treeData}
      layout={{ type: 'compactBox', direction: 'LR', nodeSep: 20 }}
      node={{
        style: n => ({
          labelText: `${n.name} x${n.quantity}`,
          nodeSize: 10 + Math.log2(n.cost + 1) * 3,
          fill: n.cost > 1000 ? '#e05b5b' : '#4a8fe6'
        })
      }}
      edge={{ style: { stroke: '#bbb' } }}
    />
  );
}

图 2：BOM 数据到两套视图的转换与联动流程。

四、旭日图：看清"钱花在哪一层" 

树图擅长路径，旭日图（Sunburst）擅长

。它把树的每一层画成一个环，环的弧长等于该节点在其兄弟中的成本占比，层层向外。一眼就能看出：整机成本里，主板这一环占多大、主板里 CPU 又占多大。

 是节点的成本。ECharts 内置了旭日图系列，接树形数据即可：

const sunburstOption = {
  series: [{
    type: 'sunburst',
    data: treeData.children,
    radius: ['10%', '95%'],
    label: { rotate: 'tangential' },
    levels: [
      {}, // 根层
      { r0: '10%', r: '35%', label: { fontSize: 12 } },
      { r0: '35%', r: '65%', label: { fontSize: 10 } },
      { r0: '65%', r: '95%' }
    ]
  }]
};

五、联动交互：两套视图互为导航 

联动是这套方案的核心价值。树图点一个节点，旭日图同步高亮它所在的扇区；旭日图点一层，树图自动展开到对应分支。实现思路是

图 3：树图与旭日图的事件联动时序。

BOM 展开到叶子可能成千上万节点，工程上要守住几条线：

图 4：按 BOM 规模选择渲染与加载策略的决策流程。

本文围绕"BOM 多级展开：树图 + 旭日图的联动交互"展开，从 BOM 的层级本质讲起，落地了扁平数据转嵌套树的算法，分别用树图解决路径追溯、用旭日图解决成本占比，并给出两套视图的联动实现与性能分层方案。

供应链知识图谱 | BOM 多级展开：树图 + 旭日图的联动交互

前端开发

人工智能

BOM多级展开最佳实践：树图+旭日图联动交互，从扁平数据转嵌套树算法到JavaScript实现。树图清晰追溯零件路径，旭日图直观展示成本占比，两视图点击联动高亮，支持折叠展开与性能优化。覆盖数据建模、代码示例、交互细节，解决制造业物料清单可视化难题。

数据建模

数据结构

JavaScript

数据库

虚拟化

ReAct 

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

供应链知识图谱 | BOM 多级展开：树图 + 旭日图的联动交互

供应链知识图谱 | BOM 多级展开：树图 + 旭日图的联动交互

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐