echarts节点折叠实现

最新推荐文章于 2024-05-17 15:22:04 发布

SongJingzhou

最新推荐文章于 2024-05-17 15:22:04 发布

阅读量6.8k

点赞数 9

分类专栏：图表类文章标签： eachrts节点隐藏 echarts节点折叠

本文链接：https://blog.csdn.net/SongJingzhou/article/details/79793492

版权

图表类专栏收录该内容

0 篇文章 0 订阅

订阅专栏

问题描述：

工作用到echarts制作图表（graph关系型图），需要实现点击节点后隐藏其节点下的所有的子节点，而echarts官方并没有可用方法使用

思路：

首先获取点击节点的操作事件，然后获取节点的所有子节点，将这些子节点全部保存在自己定义的一个全局数组变量中，并且将原数组中的这些数据删除（如果不删除原数组的数据，不管怎么设置结果都是图表不发生任何变化，这是一个大坑！！！），然后重新渲染图表；而显示已隐藏的数据就是在此基础之上判断此节点是否有子节点，如果没有子节点则说明可能是上一步已经将其子节点隐藏了，这时只要将原数据添加回去即可，并且需要将添加回去的数据从自己定义的全局数组中删除

注：此次案例只是处理了三层的节点数据，具体要根据自身需求更改

上代码：

var globalSeriesData = []; //定义的全局数组变量

变量说明：

myChart：初始化之后的echarts对象（对应自己的对象）

seriesData：echarts对象的对应的option中的series数组的data数据

干货正式开始：

//定义节点点击事件的处理（参考echartsAPI文档http://echarts.baidu.com/api.html#events）

myChart.on('click', function (params) {

if (params.dataType === "node") { //判断点击的是图表的节点部分

// 标记点击的节点是否存在子节点,若不存在则说明可能在上次的操作中已经删除,这时就需要把之前删除的节点重新添加进去

var deletedFlag = false;

for (var i=seriesData.length-1;i>=0;i--) {
if (seriesData[i].category == params.name) {
if (seriesData[i].category != seriesData[i].name) { //排除删除根元素的可能
deletedFlag = true; //标注本次操作时该节点存在子节点
for (var ii=seriesData.length-1;ii>=0;ii--) { //删除第一级节点的子节点
if (seriesData[ii].category == seriesData[i].name) {
for (var iii=seriesData.length-1;iii>=0;iii--) { //删除第二级节点的子节点

if (seriesData[iii].category == seriesData[ii].name) {

//将删除的节点加入到全局数组变量，方便以后恢复该节点的子节点数据

globalSeriesData.push(seriesData[iii]);

//从原数据中将该节点的子节点删除

seriesData.splice(iii, 1);
}
}
globalSeriesData.push(seriesData[ii]);
seriesData.splice(ii, 1);
}
}
globalSeriesData.push(seriesData[i]);
seriesData.splice(i, 1); //删除该元素的第一级子节点,最多需删除三级
}
}
}
if (!deletedFlag) { //这种情况下需要恢复该节点的子节点
var nodeChildren = []; //存放本次恢复的数据,然后将它们从globalSeriesData中删除
for (var n=globalSeriesData.length-1;n>=0;n--) {
if (params.name == globalSeriesData[n].category) { //显示该节点第一级子节点
seriesData.push(globalSeriesData[n]);
nodeChildren.push(globalSeriesData[n]);

for (var nn=globalSeriesData.length-1;nn>=0;nn--) {

//显示该节点第二级子节点

if (globalSeriesData[n].name == globalSeriesData[nn].category) {
seriesData.push(globalSeriesData[nn]);
nodeChildren.push(globalSeriesData[nn]);

for (var nnn=globalSeriesData.length-1;nnn>=0;nnn--) {

//显示该节点第三级子节点

if (globalSeriesData[nn].name == globalSeriesData[nnn].category) {
seriesData.push(globalSeriesData[nnn]);
nodeChildren.push(globalSeriesData[nnn]);
}
}
}
}
}

}

//如果本次点击将之前隐藏的数据重新加入数据数组，则需要将这些数据从全局数组中删除，以免后续操作时数据重复导致出错

if (nodeChildren.length > 0) {
for (var s=0;s<nodeChildren.length;s++) {
for (var n=globalSeriesData.length-1;n>=0;n--) {
if (nodeChildren[s].name == globalSeriesData[n].name) {
globalSeriesData.splice(n, 1);
}
}
}
}
}
//重新渲染图表
myChart.setOption(option);
}
});

另外我准备了一个可运行的demo：

可直接将代码粘贴在 http://gallery.echartsjs.com/editor.html 测试

});

以上完结：

要是还嫌麻烦可以直接点击这个链接，查看我做的一个小示例 http://gallery.echartsjs.com/editor.html?c=xH1kUesyiG&v=1

SongJingzhou

关注

9
点赞
踩
16

收藏

觉得还不错? 一键收藏
4
评论
echarts节点折叠实现

问题描述：工作用到echarts制作图表（graph关系型图），需要实现点击节点后隐藏其节点下的所有的子节点，而echarts官方并没有可用方法使用思路：首先获取点击节点的操作事件，然后获取节点的所有子节点，将这些子节点全部保存在自己定义的一个全局数组变量中，并且将原数组中的这些数据删除（如果不删除原数组的数据，不管怎么设置结果都是图表不发生任何变化，这是一个大坑！！！），然后重新渲染图表；而显示...
复制链接

扫一扫