如何在Grafana中为Apache ECharts Treemap绑定JSON-API数据源？

核心问题拆解 #

Treemap依赖层级嵌套结构的数据渲染，但JSON-API返回的多为扁平格式，所以关键是完成「扁平数据→层级结构」的转换，再对接ECharts配置。

具体实现方案 #

1. 先确认JSON-API数据源连通性 #

确保Grafana已成功添加并测试你的Demo JSON-API数据源，能正常拉取SLADummy数据。

2. 用Grafana Transform做数据结构转换 #

在ECharts面板的Data标签页，通过Transform功能把扁平数据转为层级结构：

• 添加「Group by」转换：选择需要作为层级维度的字段（比如按区域、服务类型），多次添加可构建多级层级（先按region分组，再按service二次分组）
• 添加「Reduce」转换：聚合数值字段（比如计算每个分组的SLA均值/总和），作为Treemap节点的数值指标

3. 在ECharts配置中动态生成层级数据 #

切换到Options标签页，修改series配置，通过Grafana模板变量${data}处理转换后的数据：

series: [
  {
    type: 'treemap',
    data: (function() {
      // 将Grafana转换后的扁平分组数据转为嵌套结构
      function buildTree(data, levels) {
        const root = { name: '总览', children: [] };
        data.forEach(item => {
          let currentNode = root;
          // 逐层构建层级
          levels.forEach(level => {
            const levelVal = item[level];
            let child = currentNode.children.find(n => n.name === levelVal);
            if (!child) {
              child = { name: levelVal, children: [] };
              currentNode.children.push(child);
            }
            currentNode = child;
          });
          // 绑定聚合后的数值
          currentNode.value = item['sla_avg']; // 替换为你的聚合字段名
        });
        return [root];
      }
      // 传入层级字段数组，需和Transform的Group by顺序一致
      return buildTree(${data}, ['region', 'service']);
    })()
  }
]

4. 调试验证 #

• 在Data标签页确认转换后的数据结构符合分组要求
• 调整配置中的字段名，确保和API返回、Transform输出的字段完全匹配
• 预览面板，验证Treemap能动态加载API数据并正确展示层级

简化方案：API直接返回层级结构 #

如果Grafana Transform无法满足复杂层级需求，可修改Demo API，直接返回ECharts Treemap兼容的嵌套结构：

[
  {
    "name": "总览",
    "children": [
      {
        "name": "Region A",
        "children": [
          { "name": "Service X", "value": 99.5 },
          { "name": "Service Y", "value": 98.8 }
        ]
      },
      {
        "name": "Region B",
        "children": [
          { "name": "Service Z", "value": 99.2 }
        ]
      }
    ]
  }
]

这种情况下，ECharts配置可直接绑定数据：

series: [
  {
    type: 'treemap',
    data: ${data}
  }
]

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