如何从零搭建无层级聚合的多层级Hierarchical Treemap带上下钻取功能

核心思路 #

• 跳过所有可视化工具默认的子节点向上聚合逻辑，给每一层级的所有节点（包括父节点、子节点、叶子节点）手动设置独立的value数值，完全由你自己控制每个节点的块大小参考值
• 下钻/上卷功能只绑定视图层级切换，不和数据聚合逻辑绑定：点击父节点时仅渲染该节点的下一层级子节点，点击返回时切回上一层级视图即可
• 优先选用支持自定义节点值、原生封装多层级Treemap布局和下钻交互的库，不需要从零实现Treemap的矩形切割算法，大幅降低开发成本

可直接复用的实现方案（基于ECharts） #

ECharts的Treemap组件原生支持多层级结构、自定义节点值、自带下钻/上卷交互，完全符合你的需求，实现步骤如下：

1. 先处理你的CSV数据，转换为嵌套的JSON结构，每个节点必须包含name（节点名）、value（你需要的独立数值，和子节点无关联）、children（下一层级节点数组，叶子节点可以省略该字段），示例数据结构参考：

const yourData = [
  {
    name: "父节点1",
    value: 89, // 父节点独立数值，不需要和子节点求和结果一致
    children: [
      {
        name: "子节点1-1",
        value: 42,
        children: [
          {name: "叶子节点1-1-1", value: 18},
          {name: "叶子节点1-1-2", value: 24}
        ]
      },
      {name: "子节点1-2", value: 56}
    ]
  },
  {
    name: "父节点2",
    value: 120,
    children: [
      {name: "子节点2-1", value: 76},
      {name: "子节点2-2", value: 33}
    ]
  }
]

2. 页面引入ECharts后，初始化图表并配置参数即可：

// 初始化图表实例，dom节点需要提前设置宽高
const chartInstance = echarts.init(document.getElementById('treemap-container'));

const option = {
  series: [{
    type: 'treemap',
    data: yourData,
    // 开启点击节点下钻功能
    nodeClick: 'drillDown',
    // 开启层级面包屑，点击面包屑可返回上一层级
    breadcrumb: {
      show: true
    },
    // 自定义节点显示文本，可同时展示名称和数值
    label: {
      formatter: '{b}\n数值：{v}'
    }
  }]
}

// 渲染图表
chartInstance.setOption(option);

关键说明 #

• 你不需要做任何额外的聚合计算，ECharts会直接使用每个节点自带的value值计算矩形大小，完全不会自动把子节点的数值求和赋值给父节点
• 支持任意多的层级嵌套，只要你的数据结构按照children嵌套即可
• 如果需要自定义交互逻辑，可以监听ECharts的click事件手动控制层级切换，不需要使用默认的下钻配置

内容的提问来源于stack exchange，提问作者younes lahouir