使用Volkov Labs ECharts Grafana插件渲染树时遇栈溢出错误求助

问题根源 #

你代码里的jsonTree变量拿到的是Grafana Field对象，不是直接的树结构数据。Grafana的Field包含name、values、type等大量内部属性，ECharts渲染树组件时会递归解析这个复杂对象，最终触发栈溢出错误。而静态配置时你直接传入的是纯树结构JSON，所以能正常渲染。

修复方案 #

修改获取树数据的逻辑，提取Field对象中values数组里的实际树结构值（JSON数据源返回的单条数据对应values[0]）：

修正后的代码 #

function stringify(obj) {
  let cache = [];
  let str = JSON.stringify(obj, function (key, value) {
    if (typeof value === "object" && value !== null) {
      if (cache.indexOf(value) !== -1) {
        return;
      }
      cache.push(value);
    }
    return value;
  });
  cache = null;
  return str;
}

let jsonTree = null;
// 用find代替map，避免遍历所有series
const seriesA = data.series.find(s => s.refId === "A");
if (seriesA) {
  const treeField = seriesA.fields.find(f => f.name === "JsonTree");
  if (treeField && treeField.values.length > 0) {
    jsonTree = treeField.values[0]; // 提取实际的树结构数据
    console.log("提取到的树结构:", stringify(jsonTree));
  }
}

// 兜底处理，避免空数据报错
if (!jsonTree) {
  jsonTree = { name: "无数据" };
}

return {
  tooltip: {
    trigger: 'item',
    triggerOn: 'mousemove'
  },
  animationDurationUpdate: 15000,
  animationEasingUpdate: 'quinticInOut',
  series: [
    {
      type: 'tree',
      data: [jsonTree],
      top: '1%',
      left: '20%',
      bottom: '12%',
      right: '20%',
      symbolSize: 5,
      edgeShape: 'polyline',
      initialTreeDepth: 5,
      lineStyle: {
        width: 1,
        color: '#664327',
      },
      label: {
        position: 'top'
      },
      leaves: {
        label: {
          position: 'right',
          verticalAlign: 'middle',
          align: 'left'
        }
      },
      emphasis: {
        focus: 'descendant'
      },
      expandAndCollapse: true,
      animationDuration: 550,
      animationDurationUpdate: 750
    }
  ]
};

关键修改点 #

• 替换map为find，只遍历到目标series就停止，提升效率
• 从Field对象的values[0]中提取实际树结构数据，而不是直接使用Field对象
• 添加空值兜底逻辑，避免因数据缺失导致额外错误

验证方法 #

修复后可以在控制台打印jsonTree的类型和结构，确认是纯JSON对象而非Grafana Field：

console.log(typeof jsonTree); // 应输出"object"
console.log(jsonTree); // 应和你静态配置的树结构完全一致

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