echart关系树状图_Echarts关系图-力引导布局

需要做一个树形图，可以查看各个人员的关系。

可伸缩的力引导图-失败

刚开始，打算做一个可展开和伸缩的，搜索时候发现CSDN有一篇美美哒程序媛写的Echarts Force力导向图实现节点可折叠。

这里放上前辈的代码

/**

这段代码来自 http://blog.csdn.net/r4NqiAn/article/details/48320487

Echarts-Force

力导向布局图树状结构实现节点可折叠效果

作者：Reese

日期：2015-09-09

版本：V0.1

功能：点击一次节点，展开一级子节点；再次点击节点，折叠所有子孙节点；

弹出最终子节点的标签

备注：在使用该方法的时候，在nodes的属性里要自定义flag属性，并设置ignore*/

var ecConfig = require('echarts/config');functionopenOrFold(param){var linksNodes=[];//中间变量

var data=param.data;//表示当前选择的某一节点

var option = myChart.getOption();//获取已生成图形的Option

var nodesOption=option.series[0].nodes;//获得所有节点的数组

var linksOption=option.series[0].links;//获得所有连接的数组

var categoryLength=option.series[0].categories.length;//获得类别数组的大小

/**

该段代码判断当前节点的category是否为最终子节点，

如果是，则弹出该节点的label*/

if(data.category==(categoryLength-1)){

alert(data.label);

}/**判断是否选择到了连接线上*/

if(data != null && data !=undefined){/**

判断所选节点的flag

如果为真，则表示要展开数据,

如果为假，则表示要折叠数据*/

if(data.flag) {/**

遍历连接关系数组

最终获得所选择节点的一层子节点*/

for(var m inlinksOption){//引用的连接关系的目标，既父节点是当前节点

if(linksOption[m].target==data.id){

linksNodes.push(linksOption[m].source);//获得子节点数组

}

}//for(var m in linksOption){...}

/**

遍历子节点数组

设置对应的option属性*/

if(linksNodes != null && l