第归方法创建树形图

1)TreeGraph.js文件内容如下:

function treeMenu(a){
    //列表map形式
    this.tree=a||[];
    this.groups={};
	//存放id与对应的name映射
	this.nameMap={}
	//得到每个点对应的层次,为了后期进行布局
	this.levelMap={}
	//样式设计
	this.style={"symbolSize":[60,50,40,30,20],"value":[8,6,4,2,1]}
};
treeMenu.prototype={
    init:function(pid){
        this.group();
		this.MapNamebyId();
		this.setIdLevel(pid);
        return this.rescusive(pid);
    },
    group:function(){
        for(var i=0;i<this.tree.length;i++){
            //存在该grops则直接添加
            if(this.groups[this.tree[i].pId]){
                this.groups[this.tree[i].pId].push(this.tree[i]);
            }else{
                this.groups[this.tree[i].pId]=[];
                this.groups[this.tree[i].pId].push(this.tree[i]);
            }
        }
    },
	//得到每个点的层次
	setIdLevel:function(pid){
		var level=1;
		this.levelMap[pid]=level;
		var gs=this.groups[pid];
		//str=JSON.stringify(gs)
		//alert("json:"+str)
		var temp=[]
		while(gs){
			level++;
			if(gs==null||gs==undefined||gs.length==0)
				break;
			temp=[]
			for(var i=0;i<gs.length;i++){
				var myid=gs[i]["id"];
				this.levelMap[myid]=level;
				subgs=this.groups[myid];
				if(subgs instanceof Array &&subgs!=null){
				for(var j=0;j<subgs.length;j++){
				temp.push(subgs[j]);
				}
				}
			}
			gs=temp;
		}
		
	},
	//根据所在层次设计不同大小的样式
	getStyleById:function(id){
		var level=this.levelMap[id]
		if(level>=5)
			level=5;
		var symbolize=0
		var value=0
		symbolize=this.style['symbolSize'][level-1]
		value=this.style['value'][level-1]
		var styleValue={}
		styleValue['symbolSize']=symbolize
		styleValue['value']=value
		return styleValue
	},
    MapNamebyId:function(){
		for(var i=0;i<this.tree.length;i++){
			map=this.tree[i]
			this.nameMap[map["id"]]=map["name"]
		}
	},
	//设置节点属性
	setNode:function(node,name,symbolize,value,children){
		    node['name']=name;
			node['symbolSize']=symbolize;
			node['value']=value
			node['children']=children
			return node;
	},
	rescusive:function (number){//这里是构建数据源的重点
		var data=[]
		var node={}
		var styleValue={}
		//某个节点下的子节点
		var a=this.groups[number];
		var nodeName=this.nameMap[number];
		if(a==null||a==undefined){
			styleValue=this.getStyleById(number)
			//设置节点
			this.setNode(node,nodeName,styleValue['symbolSize'],styleValue['value'],[])
			return node;
		}
		for(var i=0;i<a.length;i++){
			children=this.rescusive(a[i].id);
			data.push(children);
		}
		styleValue=this.getStyleById(number)
		this.setNode(node,nodeName,styleValue['symbolSize'],styleValue['value'],data)
		return node;
	},
	//创建组织结构图
	createTreeVisual:function(myChart,title,data){
		var option = {
        title : {
        text: title
       },
        tooltip : {
        trigger: 'item',
        formatter: "{b}"
        },
      toolbox: {
        show : true,
        feature : {
            saveAsImage : {show: true}
         }
      },
      calculable : false,
       series : [
         {
            name:'树图',
            type:'tree',
            orient: 'horizontal',  // vertical horizontal
            rootLocation: {x: 100, y: '60%'}, // 根节点位置  {x: 'center',y: 10}
            nodePadding: 20,
            symbol: 'circle',
            data:data
        }]//series
	}	
     myChart.setOption(option);
	}
}
//得到数据
function getData(zNodes){
	var mytree=new treeMenu(zNodes)
	treeData=mytree.init(0)
	data=[]
	data.push(treeData)
	return data;
	//str=JSON.stringify(menu);
	//alert("responsing json:"+str)
}
function createTreeV(mychart,title,znodes){
	var mytree=new treeMenu(znodes)
	treeData=mytree.init(1)
	data=[]
	data.push(treeData)
	mytree.createTreeVisual(myChart,title,data)
}


---------------------------------
<html> <head> <meta charset="UTF-8">
<title>社交网络</title> </style> <script src="echarts-2.x.js"></script> <script src="TreeGraph.js"></script> </head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div style="padding:20px;width:100%;height:100%;"> <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 1104px;height:464px;"> </div> <div id='main_1' style="position: relative;height:15px;width: 100%;color:#A52A2A"></div> </div> <script type="text/javascript">
//data //data=createDatabyHand()
var zNodes=[ {id:1,pId:0,name:"董事长"}, {id:11,pId:1,name:"经理"}, {id:12,pId:1,name:"副总"}, {id:13,pId:1,name:"秘书"}, {id:16,pId:11,name:"财务经理"}, {id:27,pId:11,name:"人事经理"}, {id:18,pId:12,name:"HR"}, ]
data=getData(zNodes) var myChart = echarts.init(document.getElementById('main'), 'macarons'); createTreeV(myChart,"人事架构图",zNodes) </script> </body> </html>

--------------------- 作者:xqhadoop 来源:CSDN 原文:https://blog.csdn.net/xqhadoop/article/details/72518107?utm_source=copy 版权声明:本文为博主原创文章,转载请附上博文链接!

posted @ 2018-10-11 18:20  忘尘天外天  阅读(215)  评论(0编辑  收藏  举报