看到金字塔打一字别发愁，这几个组合轻松搞定

看到金字塔打一字别发愁，这几个组合轻松搞定。

前阵子搞了个项目，要做一个数据的展示界面，客户要求必须有个酷炫的图表，能把层级关系看得一清二楚。我琢磨了半天，决定用金字塔模型来展示，这玩意儿层次分明，看着就有深度。

金字塔这种东西，可视化起来挺方便，但要真从零开始画，那得花不少功夫。我这个人，不喜欢重复造轮子，能用现成的就绝不用自己瞎忙活。我就开始翻腾我收藏的那些UI组件库。

一开始我试了几个比较通用的图表库，那些饼图、柱状图玩得溜，但一到金字塔这种有点特别的结构，总觉得差点意思。要么是样式调整起来太费劲，要么就是数据绑定不够灵活，每次改动一下数据，整个图表结构都要重新算一遍，麻烦！

后来我突然想起来，我之前做过一个和组织架构图类似的东西，那些都是树状结构，跟金字塔的逻辑有点像。我赶紧把我那套代码翻出来看了看，发现核心思想就是层级划分和宽度计算。

我决定从“金”字下手，这个字本身就带着金字塔的影子。我把重心放在如何把层级数据扁平化处理，然后计算每一层的宽度和位置上。

第一个组合我试的是“层级拆解 + 比例计算”。我先递归地把数据结构拆开，每一层的数据拿出来，算清楚这一层到底有多少节点，然后根据总宽度，分配给每一层应该占据的空间比例。这就像盖房子，你得先确定每一层的地基要多宽。

光有宽度还不行，还得把这些“砖块”摆上去。我接着研究了“居中对齐 + 间距调整”。因为金字塔是要收拢的，越往上层，宽度越窄，所以每一层的节点都需要相对于上一层进行偏移，这样才能保证视觉上的那种收缩感。我花了不少时间调试那个偏移的计算公式，一开始老是偏左或者偏右，看得我心烦。

调了半天，基本形态算是出来了，但总觉得不够“立体”。客户又说，希望能点击某一层，它能高亮显示，并且展开下级内容。这就涉及到交互了。

第三个组合就是“事件绑定 + 动态渲染”。我给每个节点都绑定了一个点击事件，点击后，不直接刷新整个图表，而是只在当前层级下面动态插入或隐藏下一层的数据。这样既保持了性能，又实现了交互效果。

为了让它看起来更像个“金”字塔，而不是一堆方块堆起来，我搞了点小动作，就是“渐变填充 + 边框弱化”。用点渐变的颜色填充，让每一层看起来都有深度，同时把节点的边框弄得非常淡，主要靠内容的对比来区分层级。

折腾了三天，总算把这个看着像金字塔的图表搞定了。客户看到演示效果，直说“行，就是这个感觉！”看着那层层递进的结构，心里也踏实了，原来金字塔这玩意儿，拆开来看，无非就是层级、宽度和位置的精确计算而已，几个简单的组合就能搞定。