echarts 树状图 点击节点展开

要实现树状图节点的展开，你可以通过 ECharts 提供的 API `setOption` 来动态更新数据。具体实现步骤如下：

1. 在 ECharts 的配置项中，设置 `series` 的 `type` 为 `'tree'`，并且设置 `expandAndCollapse` 为 `true`，表示支持节点的展开和折叠。

2. 给树状图的节点添加点击事件处理函数，当节点被点击时，获取该节点的 `id`，然后通过 `setOption` 更新数据源中该节点的 `children` 属性，将其设置为该节点的子节点数据，从而实现节点的展开。

以下是一个简单的树状图展开节点的示例代码：

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

// 树状图配置项
var option = {
    series: [{
        type: 'tree',
        data: [{
            name: '节点1',
            id: 'node1',
            children: [{
                name: '节点1-1',
                id: 'node1-1',
                children: [{
                    name: '节点1-1-1',
                    id: 'node1-1-1'
                }, {
                    name: '节点1-1-2',
                    id: 'node1-1-2'
                }]
            }, {
                name: '节点1-2',
                id: 'node1-2',
                children: [{
                    name: '节点1-2-1',
                    id: 'node1-2-1'
                }, {
                    name: '节点1-2-2',
                    id: 'node1-2-2'
                }]
            }]
        }],
        expandAndCollapse: true,  // 支持节点展开和折叠
        roam: true,  // 开启缩放和拖拽
        label: {
            show: true
        }
    }]
};

// 给树状图节点添加点击事件处理函数
myChart.on('click', function(params) {
    var id = params.data.id;
    var children = params.data.children;
    if (children) {
        // 当前节点有子节点，将其子节点设置为该节点的数据源
        myChart.setOption({
            series: [{
                data: [{
                    id: id,
                    children: children
                }]
            }]
        });
    }
});

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

在上述代码中，我们给树状图添加了一个点击事件处理函数，当节点被点击时，首先获取该节点的 `id` 和 `children` 数据，然后通过 `setOption` 更新数据源中该节点的 `children` 属性，将其设置为该节点的子节点数据，从而实现节点的展开。