如何通过JSON API在Grafana中绑定Apache ECharts树形图？

我们正在评估Apache ECharts与Grafana的集成，已完成多数图表类型的集成，但在树形图（Treemap）的动态数据源适配上遇到瓶颈。参考过静态数据的树形图示例，但我们需要将JSON API作为动态数据源，由于树形图依赖层级数据结构，集成时遇到了困难。

现有测试脚本（无法正常加载动态数据） #

var thedata;

$.ajax({
  dataType: "json",
  url: 'https://packages.xxx.com/nodes.json',
  type: "GET",
  success: function (data1) {
    thedata = JSON.stringify(data1);
    alert(thedata);
  }
});

return {
  series: [{
    type: 'treemap',
    data: thedata
  }]
};

静态数据版本（可正常运行） #

var thedata;

$.ajax({
  dataType: "json",
  url: 'https://packages.xxx.com/nodes.json',
  type: "GET",
  success: function (data1) {
    thedata = JSON.stringify(data1);
    alert(thedata);
  }
});

return {
  series: [{
    type: 'treemap',
    data: [
      {
        name: 'nodeA',
        value: 10,
        children: [
          {
            name: 'nodeAa',
            value: 4
          },
          {
            name: 'nodeAb',
            value: 6
          }
        ]
      },
      {
        name: 'nodeB',
        value: 20,
        children: [
          {
            name: 'nodeBa',
            value: 20,
            children: [
              {
                name: 'nodeBa1',
                value: 20
              }
            ]
          }
        ]
      }
    ]
  }]
};

问题分析与解决方案 #

核心问题 #

1. 异步时序错误：$.ajax是异步操作，return语句会在请求完成前执行，导致thedata未被正确赋值
2. 数据类型错误：将JSON对象转为字符串后传给ECharts，而树形图需要的是原生JSON对象数组

修正后的动态数据脚本 #

// 使用async/await处理异步请求，确保数据返回后再生成配置
async function fetchAndPrepareData() {
  // 请求API数据
  const response = await fetch('https://packages.xxx.com/nodes.json');
  const rawData = await response.json();

  // 如果API返回的结构和ECharts树形图要求一致（包含name、value、children），直接使用
  // 若结构不一致，需添加字段映射逻辑（见下方示例）
  return {
    series: [{
      type: 'treemap',
      data: rawData
    }]
  };
}

// 返回异步函数的执行结果
return fetchAndPrepareData();

数据结构转换示例（若API返回字段不匹配） #

如果API返回的字段不是name/value/children，比如用label/count/subNodes，需要添加转换逻辑：

function transformTreeData(apiItems) {
  return apiItems.map(item => ({
    name: item.label,
    value: item.count,
    children: item.subNodes ? transformTreeData(item.subNodes) : []
  }));
}

// 在fetchAndPrepareData中调用转换函数
const formattedData = transformTreeData(rawData);

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