有时候展现力导向图的时候会希望添加一些点击事件,随着节点的点击事件一层一层展开更多的子节点。这样的可视化能带来层次清晰的使用效果。这次我写的脚本就是用来控制Force的节点折叠效果。
作者:Reese
时间:2015-09-09
备注:希望这个文档能对大家有帮助,有用你就悄悄copy走,再默默地给我点个赞~ (≧▽≦)/
目录
Part1 、效果图展示
一开始是酱紫的(~ ̄▽ ̄)~:
接下来是酱紫的:
最后折叠了这丫的(o゜▽゜)o☆:
Part2、 代码块
/** Echarts-Force
力导向布局图树状结构实现节点可折叠效果
作者:Reese
日期:2015-09-09
版本:V0.1
功能:点击一次节点,展开一级子节点;再次点击节点,折叠所有子孙节点;
弹出最终子节点的标签
备注:在使用该方法的时候,在nodes的属性里要自定义flag属性,并设置ignore
*/
var ecConfig = require('echarts/config');
function openOrFold(param){
var linksNodes=[];//中间变量
var data=param.data;//表示当前选择的某一节点
var option = myChart.getOption();//获取已生成图形的Option
var nodesOption=option.series[0].nodes;//获得所有节点的数组
var linksOption=option.series[0].links;//获得所有连接的数组
var categoryLength=option.series[0].categories.length;//获得类别数组的大小
/**
该段代码判断当前节点的category是否为最终子节点,
如果是,则弹出该节点的label
*/
if(data.category==(categoryLength-1)){
alert(data.label);
}
/**判断是否选择到了连接线上*/
if(data != null && data != undefined){
/**
判断所选节点的flag
如果为真,则表示要展开数据,
如果为假,则表示要折叠数据
*/
if (data.flag) {
/**
遍历连接关系数组
最终获得所选择节点的一层子节点
*/
for(var m in linksOption){
//引用的连接关系的目标,既父节点是当前节点
if(linksOption[m].target==data.id){
linksNodes.push(linksOption[m].source);//获得子节点数组
}
}//for(var m in linksOption){...}
/**
遍历子节点数组
设置对应的option属性
*/
if(linksNodes != null && linksNodes != undefined){
for(var p in linksNodes){
nodesOption[linksNodes[p]].ignore = false;//设置展示该节点
nodesOption[linksNodes[p]].flag = true;
}
}
//设置该节点的flag为false,下次点击折叠子孙节点
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);
}
}
}
}//for(var m in linksOption){...}
/**
遍历最终生成的连接关系数组
*/
if(linksNodes != null && linksNodes != undefined){
for(var p in linksNodes){
nodesOption[linksNodes[p]].ignore = true;//设置折叠该节点
nodesOption[linksNodes[p]].flag = true;
}
}
//设置该节点的flag为true,下次点击展开子节点
nodesOption[data.id].flag = true;
//重绘
myChart.setOption(option);
}//if (data.flag) {...}
}//if(data != null && data != undefined){...}
}//function openOrFold(param){...}
myChart.on(ecConfig.EVENT.CLICK, openOrFold);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
ps:对nodes的属性定义使用好label和name可以达到这样的效果
Part3 、 示例Demo
<!--
Echart
Force力导向图实现节点可折叠
作者:Reese
版本:V0.1
时间:2015-09-09
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<div id="main" style="width: 850px; height: 500px"></div>
<div id="ss" ></div>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
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
}
}
},
categories : [ {name : '学校'}, {name : '校区'}, {name : '学院'}, {name : '班级'} ],
nodes :
[{id:0,category:0,name:'0',label:'xx大学',symbolSize:40,ignore:false,flag:true},
{id:1,category:1,name:'1',label:'校区1',symbolSize:30,ignore:true,flag:true},
{id:2,category:2,name:'2',label:'学院1',symbolSize:20,ignore:true,flag:true},
{id:3,category:2,name:'3',label:'学院2',symbolSize:20,ignore:true,flag:true},
{id:4,category:1,name:'4',label:'校区2',symbolSize:30,ignore:true,flag:true},
{id:5,category:2,name:'5',label:'学院1',symbolSize:20,ignore:true,flag:true},
{id:6,category:2,name:'6',label:'学院2',symbolSize:20,ignore:true,flag:true},
{id:7,category:2,name:'7',label:'学院3',symbolSize:20,ignore:true,flag:true},
{id:8,category:1,name:'8',label:'校区3',symbolSize:30,ignore:true,flag:true},
{id:9,category:2,name:'9',label:'学院1',symbolSize:20,ignore:true,flag:true},
{id:10,category:2,name:'10',label:'学院2',symbolSize:20,ignore:true,flag:true},
{id:11,category:2,name:'11',label:'学院3',symbolSize:20,ignore:true,flag:true},
{id:12,category:2,name:'12',label:'学院4',symbolSize:20,ignore:true,flag:true},
{id:13,category:3,name:'13',label:'一班',number:45,techear:'张三',symbolSize:10,ignore:true,flag:true},
{id:14,category:3,name:'14',label:'二班',number:52,techear:'李四',symbolSize:10,ignore:true,flag:true}
],
links : [ {source : 1,target : 0}, {source : 4,target : 0}, {source : 8,target : 0},
{source : 2,target : 1}, {source : 3,target : 1}, {source : 5,target : 4},
{source : 6,target : 4}, {source : 7,target : 4}, {source : 9,target : 8},
{source : 10,target : 8}, {source : 11,target : 8}, {source : 12,target : 8},
{source : 13,target : 6}, {source : 14,target : 6} ]
} ]
};
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
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
PS:Demo是直接可以运行的╰( ̄▽ ̄)╭