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

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

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



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

找到源码中关于初始化深度的地方,发现了这段代码,可以看到这边node对象已经有isExpand这个字段了。

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


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

看下效果:

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

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









评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值