echarts本身没有组织结构图的节点收缩功能，因为项目需求要用到此功能。
引入的echarts必须是2版本的，因为3.0取消了对组织结构图的支持。下载2版本的源码，找到关于onclick事件那部分的代码，修改如下：
_onclick: function (param) { callChartListMethodReverse(this, 'onclick', param); if (param.target) { var ecData = this._eventPackage(param.target); var option = this.getOption(); var myChart = this; if (ecData && ecData.seriesIndex != null) { this._messageCenter.dispatch(ecConfig.EVENT.CLICK, param.event, ecData, this); debugger; //实现tree点击收缩 a(ecData, option, myChart); } } }
建一个新文件node_contraction.js，添加如下代码:
/** * menglinanke * 2017-06-12 * 注释只写了第一层，里面几层均相同 * 此js的前提是数据中name必须唯一，因为是根据name加以判断的。 * 目前只实现到第六层（包括root），可扩充 * 下面所有注释的代码供调试使用 * 未使用递归，是因为本人觉得使用递归在操作（增删）data数据的时候，会出现问题（未测） * 如有大神有其他简单办法，希望告诉我一下。 * */ var clickMap={};//用来存储子节点（供收缩，打开节点使用） //点击时 调用 function a(ecData, option, myChart){ debugger; var _name = ecData.name;//当前点击节点的名称 if(_posarr){ var _posarr=null; } var _posarr_=_posarr;//所有老节点的信息{[name,x,y],[name,x,y]..}//貌似没啥用 // for(var iii= 0 ; iii<_posarr_.length;iii++){ // alert(_posarr_[iii]); // } var isChild=ecData.data.children;//是否存在子节点 //alert(!(!isChild)); var _option=option; var len1=_option.series[0].data.length; var d1=_option.series[0].data;//所有的d*在下面代码中均为使用到。 var f=false;//是否找到对应节点【循环所有数据，查找到 be clicked node 在option中的位置】//----f=true.跳出所有循环 //循环clickMap中所有的节点信息 //for(var prop in clickMap){ // if(clickMap.hasOwnProperty(prop)){ // alert(prop+'-'+clickMap[prop]); // } //} //开始循环_option中的信息，用来查找当前点击的节点 for(var j=0;j<len1;j++){ //alert('d1[j].name='+d1[j].name); //第一个节点不让关闭（收起） if(_option.series[0].data[j].name==_name){ alert('can\'t be closed.'); break; } //alert(d1[j].children); if(_option.series[0].data[j].children){//若存在子节点 var len2=_option.series[0].data[j].children.length; var d2=_option.series[0].data[j].children; for(var k=0;k<len2;k++){ //alert('j:'+j+'--k:'+k+'-'+d2[k].name); //根据name判断节点是否是当前所点击的节点， if(_option.series[0].data[j].children[k].name==_name){ //判断该节点是否已关闭，若clickMap中存在k为当前节点名称的数据，并且不为空。则说明已关闭，要打开。 if(clickMap.hasOwnProperty(_name) && clickMap[_name]!=null){ //alert(_name+' has closed . open now.'); //将clickMap中的该节点的子节点信息重新赋值给当前节点 _option.series[0].data[j].children[k].children=clickMap[_name]; clickMap[_name]=null;//成功打开后，将clickMap中的数据赋null f=true; //跳出所有循环。 break; } //执行到这里，说明未关闭。执行关闭操作 f=true; //若所点击的节点存在子节点，则 if(_option.series[0].data[j].children[k].children){ //将子节点信息存入clickMap，形式【当前点击节点的name为key，子节点数据为value】 clickMap[_option.series[0].data[j].children[k].name]=_option.series[0].data[j].children[k].children; //然后将_option中的当前子节点删除。 delete _option.series[0].data[j].children[k].children; } //alert('find the node.j='+j+';k='+k); //跳出所有循环 break; }//else{alert(' not find the node.j='+j+';k='+k);} if(f)break; if(_option.series[0].data[j].children[k].children){ var len3=_option.series[0].data[j].children[k].children.length; var d3=_option.series[0].data[j].children[k].children; for(var l=0;l<len3;l++){ //alert('j:'+j+'--k:'+k+'--l:'+l+'-'+d3[l].name); if(_option.series[0].data[j].children[k].children[l].name==_name){ if(clickMap.hasOwnProperty(_name) && clickMap[_name]!=null){ //alert(_name+'has closed . open now.'); _option.series[0].data[j].children[k].children[l].children=clickMap[_name]; clickMap[_name]=null; f=true; break; } f=true; //alert('find the node.j='+j+';k='+k+';l='+l+'--'+_option.series[0].data[j].children[k].children[l].name); if(_option.series[0].data[j].children[k].children[l].children){ clickMap[_option.series[0].data[j].children[k].children[l].name]=_option.series[0].data[j].children[k].children[l].children; delete _option.series[0].data[j].children[k].children[l].children; } break; }//else{alert(' not find the node.j='+j+';k='+k+';l='+l+'--'+d3[l].name);} if(f)break; if(_option.series[0].data[j].children[k].children[l].children){ var len4=_option.series[0].data[j].children[k].children[l].children.length; var d4=_option.series[0].data[j].children[k].children[l].children; for(var m=0;m<len4;m++){ if(_option.series[0].data[j].children[k].children[l].children[m].name==_name){ if(clickMap.hasOwnProperty(_name) && clickMap[_name]!=null){ //alert(_name+'has closed . open now.'); _option.series[0].data[j].children[k].children[l].children[m].children=clickMap[_name]; clickMap[_name]=null; f=true; break; } f=true; //alert('find the node.j='+j+';k='+k+';l='+l+';m='+m+'--'+_option.series[0].data[j].children[k].children[l].children[m].name); if(_option.series[0].data[j].children[k].children[l].children[m].children){ clickMap[_option.series[0].data[j].children[k].children[l].children[m].name]=_option.series[0].data[j].children[k].children[l].children[m].children; delete _option.series[0].data[j].children[k].children[l].children[m].children; } break; }//else{alert(' not find the node.j='+j+';k='+k+';l='+l+';m='+m+'--'+d4[m].name);} if(f)break; if(_option.series[0].data[j].children[k].children[l].children[m].children){ var len5=_option.series[0].data[j].children[k].children[l].children[m].children.length; var d5=_option.series[0].data[j].children[k].children[l].children[m].children; for(var n = 0 ; n<len5;n++){ /** * 最后一层循环 * 若有需要，可扩充 */ if(_option.series[0].data[j].children[k].children[l].children[m].children[n].name==_name){ if(clickMap.hasOwnProperty(_name)&&clickMap[_name]!=null){ //alert(_name+'has closed . open now.'); _option.series[0].data[j].children[k].children[l].children[m].children[n].children=clickMap[_name]; clickMap[_name]=null; f=true; break; } f=true; //alert('find the final node .'+_option.series[0].data[j].children[k].children[l].children[m].children[n].name); if(_option.series[0].data[j].children[k].children[l].children[m].children[n].children){ clickMap[_option.series[0].data[j].children[k].children[l].children[m].children[n].name]=_option.series[0].data[j].children[k].children[l].children[m].children[n].children; delete _option.series[0].data[j].children[k].children[l].children[m].children[n].children; } break; }//else{alert(' not find the final node .'+d5[n].name);} if(f)break; } }//else{alert('d4[m]:'+d4[m].name +'-下没有子级');} if(f)break; } }//else{alert('d3[l]:'+d3[l].name+'-没有子级');} if(f)break; } }//else{alert('d2[k]:'+d2[k].name+'没有子级');} if(f)break; } }//else{alert('d1[j]:'+d1[j].name+'下没有子级');} if(f)break; } //alert('over.'); //清空当前echarts myChart.clear(); //重新赋值，渲染图表 myChart.setOption(_option); // _posarr_=_posarr;//新的坐标？？？//待开发功能。 // for(var ii= 0 ; ii<_posarr_.length;ii++){ // alert(_posarr_[ii]); // } //刷新，没啥用。。 myChart.refresh(); //for(var i=0;i<_posarr_.length;i++){ // if(_name==_posarr_[i][0]){ // alert('当前点击：'+_posarr_[i]); // break; // } //} }
然后在需要的地方引入这个文件就可以了。
实现原理：
1：定义一个array存放子节点信息。【样式 [父节点name，子节点]】
2：循环所有data中的数据，找到当前点击的节点
(if:1)根据父节点name，判断array中是否存在该节点数据，若存在并且不为空，则将该子节点数据赋值于该节点，然后将array中的该子节点信息赋值为null，跳出所有循环。重新渲染图表
(if:2)（array中不存在该节点信息的前提下）若该节点存在子节点，则将子节点按照 [父节点 name，子节点] 的样式，将子节点信息存入map，然后删除data中的该节点的子节点。跳出所有循环，重新渲染图表。
难点：
1：循环所有data数据。不能使用值引用，这样的话在删除（添加）子节点信息的时候，渲染数据的最终data起不到任何作用。（本人是使用原data，一级一级点下来的）
2：子节点数据的保存及删除。这里定义的array实现的功能类似java里的map,删除json中的数据使用delete。（delete data[0].children;）
3:重新渲染。setOption之前先clear一下。