echarts tree图,节点收缩展开处理

   最近在用echarts,想要画一个物理设备组网的TOPO图,只有Tree图比较适合。不过遇到这样一个问题,物理组网中层数越高,越往叶子层走时,元素越多,直接展开感觉有点乱。因此想控制节点的收缩与打开。

   echarts现在是3.8.4版本,看到demo中,tree有个深度的配置项initialTreeDepth可以选择初始展开的层数,也就是只能选择全部显示某一层。如图:


echarts tree图,节点收缩展开处理


echarts tree图,节点收缩展开处理

那如果我只想显示汇聚交换机2下的全部子节点就做不到,感觉很不方便。于是研究了一下echarts源码,想到我点击某个元素就可以实现该元素的收缩,那按道理的话,内部应该已经支持这样的方式。因此考虑是否可以在初始化数据的时候把这样的状态带进去,实现配置层控制。

找到源码中关于初始化深度的地方,发现了这段代码,可以看到这边node对象已经有isExpand这个字段了。echarts tree图,节点收缩展开处理

echarts tree图,节点收缩展开处理

满心欢喜的在配置项中加上isExpand:true,结果调试了一下,发现根本就传不进去这个值。跟了一下代码,发现node是内部对象,与option下的data是不同的对象,遂找到定义内部对象的地方,加上了我定义的字段mcHereShow(嘿嘿,觉得不好可以自己换一个),然后,在初始化数据的地方传入到node里面。

echarts tree图,节点收缩展开处理echarts tree图,节点收缩展开处理


echarts tree图,节点收缩展开处理

echarts tree图,节点收缩展开处理

这样的只要在配置层加上这个字段就可以在setOption时,直接选择哪些要展开,哪些要收缩啦。配置时保持和name同级的即可,children里面也是和name同级的位置

echarts tree图,节点收缩展开处理echarts tree图,节点收缩展开处理

看下效果:

echarts tree图,节点收缩展开处理

完美!如果懒的自己写代码的话,直接去这个路径上下载吧

http://download.****.net/download/wusefengye/10198878