echarts tree控制节点的展开收起

echarts使用版本

v4版本

需求

当数据量比较大时，tree的子节点会挤在一起，这不是产品想要的效果

产品期望点击某一子节点时，其他同级节点自动收起，效果如下

echarts官方文档并没有提供类似的配置，只提供了expandAndCollapse，但是无法达到我们的目的，只能去读echarts tree的源码了。

源码简单解读

treeAction.js，重点关注isExpand，每次点击操作后会触发node.isExpand的改变，从而达到展开收起的效果，这样的话我们就可以搞点小动作

var dom = document.getElementById("container");
var myChart = echarts.init(dom);
// 此处省略配置信息

通过myChart._chartsViews[0]._data.tree._nodes可以拿到节点组信息，然后迅速在click事件中对node的isExpand进行了修改，迫不及待刷新浏览器尝试，然并卵，并没有起作用，继续读源码查找原因，阅读treeView.js发现问题出在了这里，click事件在render方法调用之后，那么我们就要想办法在render等函数调用之前对nodes进行修改，于是改用mousedown事件进行修改，通过断点调试，发现mousedown事件在render等一系列函数调用之前。

假如想在初始加载时控制打开哪些节点，可以通过设置data中的collapsed属性来实现

TreeSeries.js

假如想要动态控制tree的高度和宽度可以通过myChart._chartsViews[0]._data._graphicEls个数以及myChart._chartsViews[0]._data.tree._nodes中每个节点的isExpand来判断当前显示的层级个数动态计算所需高度和宽度

简单DEMO

如果demo无法运行，应该是是echarts的cdn失效了，大家去echarts官网找最新cdn地址替换一下script引入地址即可