<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<div id="main" style="width: 850px; height: 500px"></div>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
var dd = [
{id:0,category:0,name:'0',label:'蔡',symbolSize:40,ignore:false,flag:true},
{id:1,category:1,name:'1',label:'蔡海清',symbolSize:30,ignore:false,flag:true},
{id:2,category:1,name:'2',label:'蔡文澜',symbolSize:30,ignore:false,flag:true},
{id:3,category:2,name:'3',label:'职员',symbolSize:30,ignore:false,flag:true},
{id:4,category:2,name:'4',label:'其他应付款职员',symbolSize:30,ignore:false,flag:true},
]
require.config({
paths : {
echarts : 'http://echarts.baidu.com/build/dist'
}
});
require([ "echarts", "echarts/chart/force"], function(ec) {
var myChart = ec.init(document.getElementById('main'), 'macarons');
var option = {
tooltip : {
show : false
},
series : [ {
type : 'force',
name : "Force tree",
itemStyle : {
normal : {
label : {show : true},
nodeStyle : {
brushType : 'both',
borderColor : 'rgba(255,215,0,0.4)',
borderWidth : 1
}
}
},
nodes :dd,
links : [ {source : 1,target : 0}, {source : 2,target : 0},{source : 3,target : 1},{source : 4,target : 2},
} ]
};
myChart.setOption(option);
var ecConfig = require('echarts/config');
function openOrFold(param) {
var option = myChart.getOption();
var nodesOption = option.series[0].nodes;
var linksOption = option.series[0].links;
var data = param.data;
var linksNodes = [];
var categoryLength = option.series[0].categories.length;
if (data.category == (categoryLength - 1)) {
alert(data.label);
}
if (data != null && data != undefined) {
if (data.flag) {
for ( var m in linksOption) {
if (linksOption[m].target == data.id) {
linksNodes.push(linksOption[m].source);
}
}
if (linksNodes != null && linksNodes != undefined) {
for ( var p in linksNodes) {
nodesOption[linksNodes[p]].ignore = false;
nodesOption[linksNodes[p]].flag = true;
}
}
nodesOption[data.id].flag = false;
myChart.setOption(option);
} else {
for ( var m in linksOption) {
if (linksOption[m].target == data.id) {
linksNodes.push(linksOption[m].source);
}
if (linksNodes != null && linksNodes != undefined) {
for ( var n in linksNodes) {
if (linksOption[m].target == linksNodes[n]) {
linksNodes.push(linksOption[m].source);
}
}
}
}
if (linksNodes != null && linksNodes != undefined) {
for ( var p in linksNodes) {
nodesOption[linksNodes[p]].ignore = true;
nodesOption[linksNodes[p]].flag = true;
}
}
nodesOption[data.id].flag = true;
myChart.setOption(option);
}
}
}
myChart.on(ecConfig.EVENT.CLICK, openOrFold);
});
</script>
</body>
</html>到这里一个简单的站点结构关系图就完成了。从上面的代码中不难看出来，结构关系图的重点就是两大块：
1）、nodes数组
这个内主要是用于定义结构图的所有节点，其中
category
是指当前节点属于
categories
数组内的哪一个分类。脚标从0开始；
name表示节点的名称，value表示大小；
url是我自己扩展的节点属性，用于存放当前节点对应的站点url地址。
2）、links数组
这个主要是用于定义nodes内节点之间相互的关系，只要这里建立关系后，展现出来的关系图节点相互之间会产生一条连接线进行相互之间的链接。在设置这个数组的时候需要注意一下几点：
a、source：表示节点位于nodes数组内的位置，脚标从0开始。这个数字的范围必须是[0,nodes.length]；
b、target：表示链接的目标节点在nodes数组内的位置，脚标从0开始。这个数字的范围必须是[0,nodes.length]；
c、weight：表示当前节点的权重，权重越大距离目标节点的位置越近，也表示越亲近。数字范围不限制，数字越小距离目标节点越远。
版权声明：本文为zhangwenwu2原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。