最近有读者问，关系图如何通过点击节点展开、折叠，当时没有时间写例子（最近一直比较忙），就口述了下思路……
昨晚终于抽出点时间做了一个极其简易的示例，补上。
思路
思路就是利用自带的图例动作（显示/隐藏）实现。
- 通过监听鼠标事件触发
- 判断鼠标点击的节点，通过一定规则确定要隐藏/显示的category（这里给当时问我的读者道个歉……当时我给说成series 了，实际上关系图的图例是通过series[i]-graph.categories 和 series[i]-graph.data[i].category结合 legend 配置的）
- 通过legendSelect / legendUnSelect 这两个图标行为（ACTION）完成所需图例的显示/隐藏；或者直接通过修改option.legend.selected 并setOption 实现。
实现
一、首先准备些数据:
1、关系图的节点数据 data
2、节点间关系数据 links
3、用于图例的 categories 类目名称列表 categories
4、一个用于记录节点显示/隐藏状态的 categoryStatus
二、准备配置项 option
代码语言：javascript复制option = {
title: {
text: '关系图点击节点展开次级节点效果尝试'
},
tooltip: {},
legend: {
show: false,
y: '8%',
data: categories
},
animationDuration: 1500,
animationEasingUpdate: 'quinticInOut',
series: [{
name: 'ECharts学习',
type: 'graph',
layout: 'none',
data: data,
links: links,
categories: categories.map(function(a) {
return {
name: a
};
}),
roam: true,
focusNodeAdjacency: true,
itemStyle: {
normal: {
borderColor: '#fff',
borderWidth: 1,
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.3)'
}
},
label: {
position: 'right',
formatter: '{b}'
},
lineStyle: {
color: 'source',
curveness: 0.3
},
emphasis: {
lineStyle: {
width: 10
}
}
}]
};- 大部分的配置是直接照搬官方示例的
- 这里隐藏了图例：option.legend.show设置为 false
- 把 categories 列表转换成 series[i]-graph.categories要求的格式，即 series[i]-graph.categories[i].name
三、最主要的部分：监听鼠标事件、操作图表行为
代码语言：javascript复制myChart.on('click', function(params) {
categoryName = params.name '_childrens';
// 如果 category 状态为显示，则通过一定规则隐藏所有 childres
if (categoryStatus[categoryName]) {
// 这里为了省事，直接通过字符串匹配判断了
for (let i in categories) {
if (categories[i].includes(params.name) && categories[i] != 'node0') {
myChart.dispatchAction({
type: 'legendUnSelect',
// 图例名称
name: categories[i]
});
}
}
categoryStatus[categoryName] = false;
// 如 category 状态为隐藏，则显示
} else {
for (let i in categories) {
if (categories[i].includes(params.name) && categoryStatus[categories[i]] || categories[i] === categoryName) {
myChart.dispatchAction({
type: 'legendSelect',
// 图例名称
name: categories[i]
});
}
}
categoryStatus[categoryName] = true;
}
});
- 监听鼠标点击事件，判断子节点的显/隐状态
- 如显示，则将所有子节点全部隐藏
- 如隐藏，则将 categoryStatus 中记录为显示的子节点显示
