如何配置ECharts树形图treemap.data.label.formatter实现指定标签显示

要实现用formatter: '{b} brand count => {@brand}'显示Region1-Country1 brand count => 8，关键是让ECharts能识别到brand这个维度字段。根据你给出的ECharts文档说明，{@xxx}是直接读取节点数据里名为xxx的字段值，所以数据结构要这么调整：

正确的数据结构示例 #

data: [
  {
    name: 'Region1',
    children: [
      {
        name: 'Region1-Country1',
        value: 800, // 这个值用来决定该节点在treemap中的面积大小，对应原数据里的$ spend
        brand: 8, // 直接把brand字段放在节点对象里，{@brand}就会读取这个值
        label: {
          show: true,
          formatter: '{b} brand count => {@brand}'
        },
        children: [
          { name: 'Region1-Country1-Brand1', value: 200 },
          { name: 'Region1-Country1-Brand2', value: 500 },
        ]
      },
      {
        name: 'Region1-Country2',
        value: 500,
        children: [
          { name: 'Region1-Country2-Brand1', value: 100 },
          { name: 'Region1-Country2-Brand2', value: 200 },
          { name: 'Region1-Country2-Brand3', value: 200 },
        ]
      },
    ]
  },
]

核心逻辑说明 #

• ECharts的{@xxx}语法是直接读取当前节点数据对象中名为xxx的属性值，所以只要把brand:8直接挂在Region1-Country1的节点上，{@brand}就能精准取到8这个值。
• value字段在这里只负责定义节点的面积大小，直接传对应的数值（比如原数据里的800）即可，不需要用数组或者嵌套对象的形式——treemap的value字段要求是数值或数值数组，用对象会导致节点无法正常渲染。

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