html 根据节点自动分布,力导图——节点平均分布（通过固定节点坐标）

require.config({

paths : {

echarts : 'dist' //存放Echarts 的路径

//强调，这里用的Echarts.js是2.2.7版本的，新版本的，可能不行。

}

});

require([ "echarts", "echarts/chart/force"],

//echarts/chart/force

function(ec) {

var myChart = ec.init(document.getElementById('chart'), 'macarons'); //chart 为放图表的div块的id

var option = {

tooltip : {

show : false //工具栏，显示为true

},

series : [ {

type : 'force',

name : "Force tree",

draggable:false, //拖动，可拖放

// useWorker:true,

steps:1,

gravity:0.6,

roam:false,

itemStyle : {

normal : {

linkStyle: {

type: 'curve',

color:'#2aaa90',

width:2

}

},

emphasis:{

label : {show : true},

nodeStyle : {

color:'#f1ab66',

borderColor : 'rgba(255,255,255,1)',

borderWidth : 3

}

}

},

categories : [

//第一类型节点的样式

{

name : '0',

symbolSize:40, //节点大小

itemStyle:{

normal:{//正常

color:'#24b1b6',

borderColor:'#18838b',

borderWidth:6,

borderWidth : 0,

label : {

show : true,

textStyle:{

fontSize:18

}

}

},

emphasis:{ //强调，即鼠标覆盖或点击时的样式

borderWidth:6,

borderColor:'#fff',

label : {

show : true,

textStyle:{

fontSize:18

}

}

}

}

},

//第二类型节点的样式

{

name : '1',

symbolSize:20,

itemStyle:{

normal:{

color:'#2aaa90',

borderWidth : 0,

label : {

show : true,

textStyle:{

fontSize:15

}

}

},

emphasis:{

borderColor:'#fff',

label : {

show : true,

textStyle:{

fontSize:15

}

}

}

}

},

//第三类型节点的样式

{

name : '2',

symbolSize:35,

itemStyle:{

normal:{

color:'#24b6bc',

borderWidth : 0,

label : {

show : true,

textStyle:{

fontSize:18

}

}

},

emphasis:{

borderWidth:4,

borderColor:'#fff',

label : {

show : true,

textStyle:{

fontSize:18

}

}

}

}

}

],

nodes : [

{id:0,category:0,name:'film',label:'班级',ignore:false,flag:true,initial:[500,300],fixX:true,fixY:true},

{id:1,category:1,name:'role',label:'职位1',ignore:true,flag:true},

{id:2,category:1,name:'role1',label:'职位2',ignore:true,flag:true},

{id:3,category:1,name:'role2',label:'职位3',ignore:true,flag:true},

{id:4,category:1,name:'role3',label:'职位4',ignore:true,flag:true},

{id:5,category:1,name:'role4',label:'职位5',ignore:true,flag:true},

{id:6,category:1,name:'role5',label:'职位6',ignore:true,flag:true},

{id:7,category:2,name:'0',label:'小小',ignore:true,flag:true},

{id:8,category:2,name:'1',label:'小西',ignore:true,flag:true},

{id:9,category:2,name:'2',label:'小利',ignore:true,flag:true},

{id:10,category:2,name:'3',label:'多多',ignore:true,flag:true},

{id:11,category:2,name:'4',label:'德',ignore:true,flag:true},

{id:12,category:2,name:'5',label:'大卫',ignore:true,flag:true},

],

links : [ //顺序有要求的

{source : 1,target : 0},

{source : 2,target : 0},

{source : 3,target : 0},

{source : 4,target : 0},

{source : 5,target : 0},

{source : 6,target : 0},

{source : 7,target : 1},

{source : 8,target : 2},

// {source : 9,target : 2},

{source : 9,target : 3},

{source : 10,target : 4},

{source : 11,target : 5},

{source : 12,target : 6},

]

}]

};

(function(){

//link 集

var linksSet = option.series[0].links;

//节点集

var nodesSet = option.series[0].nodes;

//用于存放角色列表

var roleList = [];

for(var i=0;i

if(linksSet[i].target == 0){

roleList.push(linksSet[i].source);

}

else continue;

}

//每一小份的度数

var each = Math.PI*2/roleList.length;

//alert(Math.cos(each));

var tx;

var ty;

for(var i=0;i

//双重循环初始化第一层子节点以及第二层子节点的坐标

tx = 280 + 67*Math.cos(each*(i+1));

ty = 300 - 67*Math.sin(each*(i+1));

nodesSet[roleList[i]].initial = [tx,ty];

nodesSet[roleList[i]].fixX = true;

nodesSet[roleList[i]].fixY = true;

for(var j=1;j

if(linksSet[j].target == roleList[i]){

var ttx = 280 + 270*Math.cos(each*(i+1));

var tty = 300 - 270*Math.sin(each*(i+1));

nodesSet[linksSet[j].source].initial = [ttx,tty]; //设置坐标

//将fixX和fixY设置为true,坐标才起作用。

nodesSet[linksSet[j].source].fixX = true;

nodesSet[linksSet[j].source].fixY = true;

}

}

}

})()

myChart.setOption(option);

var ecConfig = require('echarts/config');

//当鼠标点击节点，会展开该节点的延伸

function showNodes(param) {

//可在此添加点击事件

var data = param.data;

if(data.flag == false){

return false;

}

var option = myChart.getOption();

var nodesOption = option.series[0].nodes;

var linksOption = option.series[0].links;

for(var i=1;i

nodesOption[i].ignore = false;

}

myChart.setOption(option);

}

myChart.on(ecConfig.EVENT.HOVER,showNodes);

});