前端垂直子节点树形图实现求助（ECharts尝试未达标）

方案1：调整ECharts配置尝试（近似效果） #

ECharts的tree组件默认同一层级子节点为水平排列，若要近似实现垂直堆叠效果，可修改方向与布局参数：

option = {
  series: [
    {
      type: 'tree',
      symbolSize: 12,
      orient: 'horizontal', // 切换为水平方向
      layout: 'compact', // 启用紧凑布局
      nodeGap: 30, // 节点垂直间距
      layerGap: 80, // 层级水平间距
      edgeShape: "polyline",
      label: {
        position: 'right', // 标签置于节点右侧
        verticalAlign: 'middle',
        align: 'left'
      },
      data: [
        {
          name: 'Collector',
          children: [
            {
              name: 'COM1',
              children: [
                { name: 'METEHDLPDXAP4' },
                { name: 'METSLKTYDAK19' }
              ]
            },
            { name: 'COM2' }
          ]
        }
      ]
    }
  ]
};

注：此方案仅为近似效果，若要完全匹配参考图，更推荐使用以下方案。

方案2：使用D3.js实现精准垂直树形布局 #

D3.js可自定义树形布局方向，轻松实现子节点垂直排列的效果，示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <style>
    .node circle {
      fill: #fff;
      stroke: steelblue;
      stroke-width: 3px;
    }
    .node text { font: 12px sans-serif; }
    .link {
      fill: none;
      stroke: #ccc;
      stroke-width: 2px;
    }
  </style>
</head>
<body>
  <svg width="600" height="400"></svg>

  <script>
    // 树形数据
    const data = {
      name: 'Collector',
      children: [
        {
          name: 'COM1',
          children: [
            { name: 'METEHDLPDXAP4' },
            { name: 'METSLKTYDAK19' }
          ]
        },
        { name: 'COM2' }
      ]
    };

    const svg = d3.select("svg"),
          width = +svg.attr("width"),
          height = +svg.attr("height");

    // 创建向下垂直排列的树形布局
    const treeLayout = d3.tree()
      .size([height, width - 160])
      .nodeSize([60, 100]);

    const root = d3.hierarchy(data);
    treeLayout(root);

    // 绘制连接线
    svg.append("g")
      .attr("fill", "none")
      .attr("stroke", "#ccc")
      .attr("stroke-width", 2)
      .selectAll("path")
      .data(root.links())
      .join("path")
      .attr("d", d3.linkHorizontal()
        .x(d => d.y)
        .y(d => d.x));

    // 绘制节点与标签
    const node = svg.append("g")
      .attr("stroke", "#fff")
      .attr("stroke-width", 3)
      .selectAll("g")
      .data(root.descendants())
      .join("g")
      .attr("transform", d => `translate(${d.y},${d.x})`);

    node.append("circle")
      .attr("r", 6)
      .attr("fill", "#555");

    node.append("text")
      .attr("x", d => d.children ? -12 : 12)
      .attr("dy", "0.35em")
      .attr("text-anchor", d => d.children ? "end" : "start")
      .text(d => d.data.name)
      .style("font", "12px sans-serif");
  </script>
</body>
</html>

方案3：纯HTML+CSS实现轻量树形结构 #

适用于数据量较小的场景，无需依赖第三方库：

<!DOCTYPE html>
<html>
<head>
  <style>
    .tree {
      list-style: none;
      padding-left: 20px;
    }
    .tree li {
      position: relative;
      margin: 8px 0;
    }
    .tree li::before {
      content: '';
      position: absolute;
      top: 12px;
      left: -15px;
      width: 10px;
      height: 1px;
      background: #ccc;
    }
    .tree li::after {
      content: '';
      position: absolute;
      top: 0;
      left: -15px;
      width: 1px;
      height: 100%;
      background: #ccc;
    }
    .tree li:last-child::after {
      height: 12px;
    }
    .tree-node {
      display: inline-block;
      padding: 4px 8px;
      border: 1px solid steelblue;
      border-radius: 4px;
      background: #fff;
    }
  </style>
</head>
<body>
  <ul class="tree">
    <li>
      <div class="tree-node">Collector</div>
      <ul class="tree">
        <li>
          <div class="tree-node">COM1</div>
          <ul class="tree">
            <li><div class="tree-node">METEHDLPDXAP4</div></li>
            <li><div class="tree-node">METSLKTYDAK19</div></li>
          </ul>
        </li>
        <li><div class="tree-node">COM2</div></li>
      </ul>
    </li>
  </ul>
</body>
</html>

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