Echarts树状图如何实现折叠展开

发布时间：2025-04-14 22:29:37 作者：小樊
来源：亿速云阅读：123

ECharts 的树状图可以通过设置 initialTreeDepth 属性来实现折叠和展开功能。initialTreeDepth 属性用于控制树状图初始展开的层级，取值范围为 0 到 Infinity。取值为 0 时表示只显示根节点，取值为 1 时表示显示根节点及其子节点，以此类推。

下面是一个简单的 ECharts 树状图示例，实现了折叠和展开功能：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ECharts</title>
  <!-- 引入 ECharts 文件 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
</head>
<body>
  <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
      tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove'
      },
      series: [
        {
          type: 'tree',
          data: [{
            name: '根节点',
            children: [
              {
                name: '子节点1',
                children: [
                  {
                    name: '叶子节点1'
                  },
                  {
                    name: '叶子节点2'
                  }
                ]
              },
              {
                name: '子节点2',
                children: [
                  {
                    name: '叶子节点3'
                  },
                  {
                    name: '叶子节点4'
                  }
                ]
              }
            ]
          }],
          top: '1%',
          left: '7%',
          bottom: '1%',
          right: '20%',
          symbolSize: 7,
          label: {
            position: 'left',
            verticalAlign: 'middle',
            align: 'right',
            fontSize: 9
          },
          leaves: {
            label: {
              position: 'right',
              verticalAlign: 'middle',
              align: 'left'
            }
          },
          expandAndCollapse: true, // 开启折叠展开功能
          animationDuration: 550,
          animationDurationUpdate: 750
        }
      ]
    };

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

在这个示例中，我们设置了 expandAndCollapse 属性为 true，以开启折叠展开功能。你可以根据需要调整其他属性，如 initialTreeDepth 来控制初始展开的层级。

Echarts树状图如何实现折叠展开

相关阅读