在Grafana中使用JSON-API数据源绑定Apache EChart TreeMap

Question

我们正在审查 Apache ECharts 与 Grafana 的集成。 我们领先于大多数其他图表，但被“树形图”挡住了 我们得到了一些示例演示，如下链接所示： https://echarts.volkovlabs.io/d/FlnnZ4F4k/treemap?orgId=1&editPanel=6

但这些主要是处理静态数据。 我们计划使用 JSON-API 数据源。

由于 TreeMap 期望的数据是分层结构的，因此我们无法使用 JSON-API 来使其工作。

我可以分享我正在尝试测试的演示 API。 它的网址是https://2691b864-8804-4a6e-9bbb-21fbbe520f09.mock.pstmn.io/SLADummy

因此，可以分享有关如何将 JSON-API 数据源绑定到 Grafana 中的 Apache Treemap 或任何已实现的示例的详细信息。

我们能够将 Grafana 中的 Treemap 与静态数据连接起来。 但无法将其与动态 JSON-API 数据源绑定

Answer 1

我使用下面的脚本让它工作，您可以在 TreeMap 编辑器中更新：

$.ajax({
  dataType: "json",
  url: URLToGetData,
  type: "GET",
  data: JSON,
  success: function (data1) {
        const unitName= replaceVariables('$Unit');
    alert(unitName);
    var option1 = {
      series: [
        {
          type: 'treemap',
          data: data1
        }
      ]
    };
    echartsInstance.setOption(option1);
  
  },
  error: function () {
    alert("err!");
  }
});