js将一个扁平化的数组转换为一个echarts多级树结构的对象

js将一个扁平化的数组转换为一个echarts多级树结构的对象

第一种方式： 

function convertListToTree(list) {
  const map = new Map();
  const result = [];

  // 先建立所有节点的映射
  list.forEach(item => {
    item.children = []; // 为每个节点添加 children 属性
    map.set(item.id, item);
  });

  // 再构建树形结构
  list.forEach(item => {
    const id = item.id;
    const parentId = item.parentId;

    const node = map.get(id);

    if (parentId) {
      // 如果有父节点，则添加到父节点的 children 数组中
      const parent = map.get(parentId);
      if (parent) {
        parent.children.push(node);
      }
    } else {
      // 如果没有父节点，则作为根节点
      result.push(node);
    }
  });

  return result;
}

// 示例数据
const listData = [
  { "id": "1", "name": "Node 1" },
  { "id": "2", "name": "Node 2", "parentId": "1" },
  { "id": "3", "name": "Node 3", "parentId": "1" },
  { "id": "4", "name": "Node 4", "parentId": "2" },
  { "id": "5", "name": "Node 5", "parentId": "2" },
  { "id": "6", "name": "Node 6", "parentId": "3" }
];

const treeData = convertListToTree(listData);
console.log(JSON.stringify(treeData, null, 2));

在 ECharts 的 series 配置项中使用它来生成树图：

// 初始化图表实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
  tooltip: {},
  series: [{
    type: 'tree',
    data: [treeData], // 使用转换后的树形数据
    top: '18%',
    bottom: '14%',
    left: '7%',
    right: '20%',
    symbolSize: 7,
    label: {
      position: 'left',
      verticalAlign: 'middle',
      align: 'right'
    },
    leaves: {
      label: {
        position: 'right',
        verticalAlign: 'middle',
        align: 'left'
      }
    },
    expandAndCollapse: true,
    animationDuration: 550,
    animationDurationUpdate: 750
  }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

实际项目中自定义了节点图标，导致分辨不出来哪些节点是有子节点的，在series对象中设置initialTreeDepth: -1 表示默认展开所有节点即可。

第二种方式：

function arrayToEChartsMultiLevelTree(flatArray, idKey, parentIdKey) {
  // 根据id和parentId构建节点映射
  const nodeMap = {};
  flatArray.forEach(item => {
    nodeMap[item[idKey]] = { ...item, children: [] };
  });
 
  // 构建树结构
  const tree = [];
  flatArray.forEach(item => {
    const parentId = item[parentIdKey];
    if (parentId === null || parentId === undefined) {
      // 如果没有父节点，则将其添加到树的顶层
      tree.push(nodeMap[item[idKey]]);
    } else {
      // 如果有父节点，则将其添加到父节点的children数组中
      if (nodeMap[parentId] && nodeMap[item[idKey]]) {
        nodeMap[parentId].children.push(nodeMap[item[idKey]]);
      }
    }
  });
 
  return tree;
}
 
// 示例使用
const flatData = [
  { id: 1, name: 'A', parentId: null },
  { id: 2, name: 'B', parentId: 1 },
  { id: 3, name: 'C', parentId: 1 },
  { id: 4, name: 'D', parentId: 2 },
  { id: 5, name: 'E', parentId: 3 }
];
 
const tree = arrayToEChartsMultiLevelTree(flatData, 'id', 'parentId');
console.log(tree);