版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/JM491987631/article/details/78013227
力导图——节点平均分布（通过固定节点坐标）
效果图
需要的工具包：Echarts.js、force.js (可从Echarts的官网下载)
也可以下载完整的demo
步骤
html模块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定节点，子节点平均分布</title>
<script src="echarts.js"></script>
<!-- 这里的ecarts.js用的是2.2.7版本的，新版本也是可以的 -->
</head>
<body>
<div id="chart" style="width: 1000px; height: 600px"></div>
<!-- 这里的div块为图表占位符，id必须要-->
<script src="relation_graph.js"></script>
<!-- 实现力导图的js-->
</body>
</html>demo的中force.js的存放路径为：dist/chart/force.js
js模块
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<linksSet.length;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<roleList.Length;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<linksSet.length;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.length;i++){
nodesOption[i].ignore = false;
}
myChart.setOption(option);
}
myChart.on(ecConfig.EVENT.HOVER,showNodes);
});