echarts的树形，突出一个节点：当点击一个节点的时候，是的其同级的节点收缩，本节点展开

• echarts中的树形图的data形式是：

  • 根节点：option.series[0].data
  • 对于每一个节点都有一个children数组，保存的是子节点的数据
  • 所以就形成了一棵树

• 在树中一个节点的展示与收缩是通过节点的collapsed属性进行控制的，collapsed = true，收缩；false，节点展开。

• 需求：点击一个节点，这个节点对应的数据展开，同级的数据收缩。

• 解决思路：首先绑定一个点击事件，我们就可以知道被点击的节点的params.name,.既然我们知道根节点，我们就可以对根节点进行往下遍历（DFS），得知每一个节点的深度，深度与点击节点相同的即是同级节点。最终将所有节点对应的collapsed赋对应的值就好了。

• 优化：我这边跑了两个dfs，其实可以跑一个BFS解决的。（有不懂DFS和BFS的同学可以看看算法搜索）

• 需要注意：我这边使用的节点的name作为节点唯一的标识，如果name不唯一的数据的话，可以改成其他的属性作为唯一标识。

• 我的点击函数如下

    let current_dep = 0;
    myChart.on('click', function(params) {
        dfs(option.series[0].data, params.name, 0);
        solve(option.series[0].data, params.name, current_dep);
        myChart.clear();
        myChart.setOption(option);
    });
    function dfs(array, id, dep) {
        array.forEach((obj, i) => {
            obj.dep = dep;
            if(obj.name === id) {
                current_dep = dep;
                console.log("current: " + current_dep);
            } else if(obj.children !== undefined && obj.children.length > 0) {
                return dfs(obj.children, id, dep + 1);
            }
        })
    }
    function solve(array, id, current_dep) {
        array.forEach((obj, i) => {
            if(obj.dep < current_dep) {
                obj.collapsed = false;
                if(obj.children && obj.children.length > 0) {
                    solve(obj.children, id, current_dep);
                }
            } else if(obj.dep === current_dep) {
                if(obj.name === id) {
                    obj.collapsed = false;
                } else {
                    obj.collapsed = true;
                }
            }
        })
    }

• 代码如何使用，查看效果？
  • 打开https://echarts.baidu.com/examples/editor.html?c=tree-basic
  • 粘贴代码：

	myChart.showLoading();
$.get('data/asset/data/flare.json', function (data) {
    myChart.hideLoading();

    echarts.util.each(data.children, function (datum, index) {
        index % 2 === 0 && (datum.collapsed = true);
    });

    myChart.setOption(option = {
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        series: [
            {
                type: 'tree',

                data: [data],

                top: '1%',
                left: '7%',
                bottom: '1%',
                right: '20%',

                symbolSize: 7,

                label: {
                    normal: {
                        position: 'left',
                        verticalAlign: 'middle',
                        align: 'right',
                        fontSize: 9
                    }
                },

                leaves: {
                    label: {
                        normal: {
                            position: 'right',
                            verticalAlign: 'middle',
                            align: 'left'
                        }
                    }
                },

                expandAndCollapse: true,
                animationDuration: 550,
                animationDurationUpdate: 750
            }
        ]
    });
    let current_dep = 0;
    myChart.on('click', function(params) {
        dfs(option.series[0].data, params.name, 0);
        solve(option.series[0].data, params.name, current_dep);
        myChart.clear();
        myChart.setOption(option);
    });
    function dfs(array, id, dep) {
        array.forEach((obj, i) => {
            obj.dep = dep;
            if(obj.name === id) {
                current_dep = dep;
                console.log("current: " + current_dep);
            } else if(obj.children !== undefined && obj.children.length > 0) {
                return dfs(obj.children, id, dep + 1);
            }
        })
    }
    function solve(array, id, current_dep) {
        array.forEach((obj, i) => {
            if(obj.dep < current_dep) {
                obj.collapsed = false;
                if(obj.children && obj.children.length > 0) {
                    solve(obj.children, id, current_dep);
                }
            } else if(obj.dep === current_dep) {
                if(obj.name === id) {
                    obj.collapsed = false;
                } else {
                    obj.collapsed = true;
                }
            }
        })
    }
});

• 效果图：