如何为ECharts treemap叶子节点绑定onClick点击监听器？

不要依赖nodeClick配置项实现自定义点击逻辑，该配置仅用于控制节点点击后的内置交互（展开折叠、跳转根视图等），仅支持布尔值或预设字符串参数，无法传入自定义回调。自定义交互统一通过ECharts实例的事件监听实现，步骤如下：

1. 配置项调整（可选） #

如果不需要非叶子节点的默认点击交互，先在treemap系列配置里关闭默认点击行为，避免和自定义逻辑冲突：

const option = {
  series: [
    {
      type: 'treemap',
      nodeClick: false, // 关闭内置点击交互，需要保留非叶子节点展开/折叠能力时可跳过这步
      // 其余treemap配置，比如data、label样式等
      data: yourTreeData
    }
  ]
}

2. 绑定实例点击事件 #

通过ECharts实例的on方法绑定全局click事件，在回调中判断当前点击节点是否为无下级的叶子节点，符合条件时触发Antd组件的展示逻辑：

// 初始化后的ECharts实例
const myChart = echarts.init(domRef.current)
myChart.setOption(option)

// 绑定点击监听
myChart.on('click', (params) => {
  // 叶子节点判定规则：节点数据无children字段，或children数组长度为0
  const currentNodeData = params.data
  const isLeaf = !currentNodeData.children || currentNodeData.children.length === 0

  if (isLeaf) {
    // 执行你的业务逻辑：比如更新状态控制Drawer/Card展示
    // 你初始化时传入节点的所有自定义字段都存在currentNodeData里，直接取用即可
    setActiveNode(currentNodeData)
    setDetailDrawerVisible(true)
  }
})

注意事项 #

• 若保留了nodeClick的默认值（即非false），非叶子节点的展开/折叠默认行为不会被自定义监听拦截，不需要额外写逻辑处理
• 多层下钻场景下该判定逻辑依然生效，无论当前视图下钻到哪一层，无下级的节点点击后都会触发自定义逻辑
• 组件卸载时记得通过myChart.off('click')解绑事件，避免内存泄漏

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