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 版權宣告：本文為博主原創文章，轉載請附上博文連結！