使用js 怎么变成这种数据格式

问题遇到的现象和发生背景

最近弄一个echart 桑葚图，后端返回的数据是这种格式，前端展示不了

问题相关代码，请勿粘贴截图

后端返回两个数组，如何将两个数组转换成图2的格式内容，

运行结果及报错内容

后端返回的格式是这种。

img

我的解答思路和尝试过的方法

我尝试两个数据遍历，但是多了很多数据。重复了。。

我想要达到的结果

img

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    const arr = [
      {
        name: "燃气",
        value: 500,
      },
      {
        name: "电",
        value: 22,
      },
      {
        name: "水",
        value: 12,
      },
    ];
    const all2 = [
      {
        name: "天然气",
        value: 444,
      },
      {
        name: "储能",
        value: 555,
      },
    ];

    const data = arr.map((item) => {
      return { name: item.name };
    });
    const links = all2.map((item) => {
      return {
        source: item.name,
        target: `${item.name} `,
        value: item.value,
      };
    });
    console.log("data", data);
    console.log("links", links);
  </script>
</html>

这种数据最好是服务端生成你图2需要的格式然后直接返回（前端代码直接使用），因为修改后服务端也需要同步修改并存储等，如果让前端来解决，后续比如添加修改之后等都会带来麻烦。

这种数据最好是服务端生成你图2需要的格式然后直接返回（前端代码直接使用），因为修改后服务端也需要同步修改并存储等，如果让前端来解决