如何让ECharts Treemap标签字号随节点盒子大小动态变化？

完全可以实现，核心思路是利用ECharts提供的标签回调函数，结合节点的实际渲染尺寸动态计算字号，替代硬编码的固定值。

具体实现方式 #

在Treemap的label配置中，通过formatter的回调函数获取当前节点的宽高信息，以此计算适配的字号。这里提供两种可靠的实现方式：

方式1：使用HTML富文本直接设置字号

这种方式直观，直接在返回的标签内容中嵌入样式：

series: [{
  type: 'treemap',
  data: [/* 你的树形结构数据 */],
  label: {
    show: true,
    formatter: function(params) {
      // 获取节点的实际渲染宽高中的较小值
      const nodeSize = Math.min(params.rect.width, params.rect.height);
      // 计算字号：限制在8-16px区间，取节点最小尺寸的1/10（可按需调整比例）
      const fontSize = Math.max(8, Math.min(16, nodeSize / 10));
      // 返回带动态字号的标签文本
      return `<span style="font-size: ${fontSize}px;">${params.name}</span>`;
    }
  }
}]

方式2：结合rich富文本配置（更推荐）

如果需要统一管理标签样式，可通过rich配置配合动态修改样式的方式：

series: [{
  type: 'treemap',
  data: [/* 你的树形结构数据 */],
  label: {
    show: true,
    rich: {
      dynamicLabel: {
        color: '#333', // 基础颜色可固定
        fontWeight: 'normal'
      }
    },
    formatter: function(params) {
      const nodeSize = Math.min(params.rect.width, params.rect.height);
      const fontSize = Math.max(8, Math.min(16, nodeSize / 10));
      // 动态更新rich样式中的字号
      this.label.rich.dynamicLabel.fontSize = fontSize;
      return `{dynamicLabel|${params.name}}`;
    }
  }
}]

关键细节说明 #

• params.rect：ECharts在回调中提供的节点渲染信息，包含width和height两个属性，代表当前节点的实际显示尺寸。
• 字号限制：用Math.max和Math.min锁定字号范围，避免节点过小时标签不可读，或节点过大时标签突兀。
• 比例调整：可根据需求修改nodeSize / 10中的分母，分母越小字号越大，反之则越小。

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