echarts隐藏关系图中某一类节点

最新推荐文章于 2023-12-01 20:23:07 发布
原创 最新推荐文章于 2023-12-01 20:23:07 发布 · 3.3k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery

本文介绍如何使用ECharts动态地隐藏和显示特定类别数据，通过修改数据集并重新绘制图表实现。提供了具体示例代码，展示了如何根据不同category值进行数据的增删操作。

之前用echarts实现关系图后，就想着是不是可以通过点击某个按钮然后就把某一类数据隐藏。本来是想通过legend来实现的，毕竟看官网的例子，他们用legend就挺方便的，但是和我的需求有些不一样，所以就自己想了个法子去实现这样有一个功能。思路如下：定义多个数组，用它们来装某一类数据，当我们需要隐藏该类数据的时候就把这些数据从总的数据里面移到用来装该数据的数组中，但我们需要恢复数据时就可以把该分组的数据移到总数据中。总的来说就是修改data，然后重新画图，有点浪费空间和时间…
下面是例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<body>
<div id="OdfMes" style="width: 1800px;height: 800px;float: right"></div>
<script>

    var datas=[];//总的数据
    var links=[];//连接情况

    var cage0=[];//cage为0的数据
    var cage1=[];//cage为1的数据
    var cage2=[];//cage为2的数据


    datas.push({
            name: '校园大数据',

            symbolSize: 120,
            draggable: true,
            category: 0,
            itemStyle: {
                normal: {
                    borderColor: '#04f2a7',
                    borderWidth: 6,
                    shadowBlur: 20,
                    shadowColor: '#04f2a7',
                    color: '#001c43',
                }
            }
        },
        {
            name: '舆情大数据',
            symbolSize: 100,
            itemStyle: {
                normal: {
                    borderColor: '#04f2a7',
                    borderWidth: 4,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: '#001c43',
                }
            },
            category: 1,

        },
        {
            name: '用户分析',
            symbolSize: 80,
            category: 1,
            itemStyle: {
                normal: {
                    borderColor: '#04f2a7',
                    borderWidth: 4,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: '#001c43',
                }
            },

        },
        {
            name: '话题分析',
            symbolSize: 80,
            category: 1,
            itemStyle: {
                normal: {
                    borderColor: '#82dffe',
                    borderWidth: 4,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: '#001c43',
                }
            },

        },
        {
            name: '评论分析',
            symbolSize: 80,
            category: 1,
            itemStyle: {
                normal: {
                    borderColor: '#82dffe',
                    borderWidth: 4,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: '#001c43',
                }
            },

        },
        {
            name: '图书馆分析',
            symbolSize:100,
            category: 2,
            itemStyle: {
                normal: {
                    borderColor: '#82dffe',
                    borderWidth: 4,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: '#001c43',
                }
            },

        },
        {
            name: '借阅分析',
            symbolSize:80,
            category: 2,
            itemStyle: {
                normal: {
                    borderColor: '#b457ff',
                    borderWidth: 4,
                    shadowBlur: 10,
                    shadowColor: '#b457ff',
                    color: '#001c43'
                }
            },

        },
        {
            name: '借阅排行',
            symbolSize:80,
            itemStyle: {
                normal: {
                    borderColor: '#82dffe',
                    borderWidth: 4,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: '#001c43'

                }
            },
            category: 2,

        },
        {
            name: '图书收录',
            symbolSize:80,
            itemStyle: {
                normal: {
                    borderColor: '#82dffe',
                    borderWidth: 4,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: '#001c43'
                }
            },
            category: 2,

        },
        {
            name: '图书分析',
            symbolSize:80,
            category: 2,
            itemStyle: {
                normal: {
                    borderColor: '#82dffe',
                    borderWidth: 4,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: '#001c43'
                }
            },

        });

    links.push({
            source: '校园大数据',
            target: '舆情大数据'

        },
        {
            source: '校园大数据',
            target: '图书馆分析',
        },
        {
            source: '舆情大数据',
            target: '用户分析',
        },
        {
            source: '舆情大数据',
            target: '话题分析',
        },
        {
            source: '舆情大数据',
            target: '评论分析',
        },
        {
            source: '校园大数据',
            target: '图书馆分析',
        },
        {
            source: '图书馆分析',
            target: '图书分析',
        },
        {
            source: '图书馆分析',
            target: '借阅分析',
        },
        {
            source: '图书馆分析',
            target: '借阅排行',
            value: 'DNA',
        },{
            source: '图书馆分析',
            target: '图书收录'

        });


    $(function () {
        var myChart = echarts.init(document.getElementById('OdfMes'));
        option = {
            backgroundColor: '#1a4377',

            tooltip: {},
            animationDurationUpdate: 1500,
            animationEasingUpdate: 'quinticInOut',
            color:['#83e0ff','#45f5ce','#b158ff'],
            series: [
                {
                    type: 'graph',
                    layout: 'force',
                    force:{
                        repulsion:1000,
                        edgeLength:50
                    },
                    roam: true,
                    label: {
                        normal: {
                            show: true
                        }
                    },
                    data: datas,
                    links: links,
                    lineStyle: {
                        normal: {
                            opacity: 0.9,
                            width: 5,
                            curveness: 0
                        }
                    },
                    categories:[
                        {name: '0'},
                        {name: '1'},
                        {name: '2'}
                    ]
                }
            ]
        }
        myChart.setOption(option);

        //添加点击事件
        // 
        //下面就开始隐藏和显示数据了
        myChart.on('click', function (params) {
           if(params.name=="图书收录"){
               for(var i=0;i<datas.length;i++){
                   if(datas[i].category==2){
                       //alert(datas[i].name);
                       cage2.push(datas[i]);
                       datas.splice(i,1);
                       i=i-1;//ps，因为datas.splice(i,1)会重新排序数据，如果有两个数据相连并且都是category=2的话就会出现数据删不干净
                       // delete datas[i];
                   }
               }
              //修改数据后重新画关系图
               myChart.setOption({
                   series: [{
                       data: datas,
                       links: links
                   }]
               });
           }
           if(params.name=="用户分析"){
               datas.push.apply(datas,cage2);
              cage2.length=0;//清空数据，避免下次使用的时候出现重复数据
               //修改数据后重新画关系图
               myChart.setOption({
                   series: [{
                       data: datas,
                       links: links
                   }]
               });
           }

         })
        
    })


</script>
</body>
</html>

PS：使用了category值，通过category值来判断是否要移除。这只是个简单的demo，有需要的可以根据自身的需要去修改和添加功能。直接复制上面的代码就能跑起来。

个人学习心得，欢迎大佬指点。

Echarts 关系图，饼图，动图特效，点击折叠隐藏子节点
weixin_45378382的博客
06-02 677
【代码】Echarts 关系图，饼图，动图特效，点击折叠隐藏子节点。
h5 echarts 折线单个点隐藏处理_shiny中的交互式图表D3/Echarts-利用htmlwidgets实现
weixin_32312889的博客
11-29 443
背景一入Shiny深似海，不碰前端不可能。在一些呈现效果中，需要用到双坐标轴，而ggplot2实现双坐标轴过于拧巴，同时ployly对ggplot2的交互式封装也有种种瑕疵。痛定思痛，决定踏上可视化不得不走的路——js，由于有htmlwidgets包的存在，我们可以把JavaScript中对数据可视化最优解决方案带到R里。包括那些空间可视化包Leaflet,词云包wordcloud2，对echar...
利用echarts做知识图谱的可视化
热门推荐
lijiachu的博客
09-25 2万+
一、简介 在使用neo4j对数据进行图式存储后，可以通过neo4j的端口，在浏览器上对数据进行查询更新等操作。但是要想将这些数据在自己的网站上进行显示就需要用到前端技术了。在这里我们用echarts对数据进行可视化展示。echarts是基于javascript的图表库。可以用来绘制各种各样的图表。仿制neo4j进行数据展示，可以采用力导向图实现。 二、工具 HBuilder ...
Echarts实现点击节点显示 隐藏子节点
fang.lovest.yang的博客
11-07 1万+
问题背景      项目中一个根节点，根节点有七八个子节点，子节点有较多的孙子节点。不美观，因此需要将孙子节点隐藏，当点击子节点时再去显示此子节点对应的孙子节点，再次点击则隐藏孙子节点。 问题解决      Echarts的links的source target可以为边的源节点名称的字符串，也支持使用数字表示源节点的索引，所以创建links链接数据节点时source target使用字符串就...
ECharts动态修改series节点显示隐藏
鹏多多的博客
08-29 3354
要求将图表分组，根据用户选择的组，来确定ECharts要显示那些线条和柱子，也就是动态的显示series系列。
echarts人物关系图
12-04
在人物关系图中，每个节点代表一个个体，节点间的连线表示他们之间的关系，线的粗细和颜色可以反映关系的强度或性质。 **二、ECharts配置项** 1. **series-type:** 首先，你需要在ECharts配置项中设置`series-type...
echarts关系图中保留多条关系的js包
07-14
标题中的"echarts关系图中保留多条关系的js包"正是针对这一需求，提供了解决方案。 在ECharts的Graph图表中，每个节点可以与其他多个节点存在多种关系，这可以通过设置节点间的边（edge）来实现。边的数据结构通常...
ECharts关系图-关系图2.rar
12-19
ECharts关系图是一种强大的数据可视化工具，它可以帮助用户将复杂的数据关系以图形化的方式展示出来。关系图是一种特殊的图表，它通过线条来连接各个节点，从而表达不同实体之间的关联性。在数据可视化领域，关系图...
vue项目中实际构建echarts拓扑关系图业务
SHALLNY
11-15 1万+
由于现在echarts的利用率增强，需要用到拓扑图的设计，如果单纯针对echarts文档来看，虽然可以利用API详细了解到功能点，但具体的实际运用与开发场景经验案例还是略有欠缺，下面将针对echarts关系拓扑图进行实例讲解。关系拓扑图，顾名思义，是有具体的关系存在的点，具有向量指向特点。那么就要求数据具备和的属性。思路是这样的，首先描绘物体（关系点），再者是描绘连接关系点的连线。 简单效果图如上图，共4层类型，同一层为同一个类型，分别是：运维人员、数据库、应用、用户，连接线为起始到终点的指向关系 2.测
echart关系树状图_Echarts关系图-力引导布局
weixin_32951341的博客
12-23 1494
需要做一个树形图，可以查看各个人员的关系。可伸缩的力引导图-失败刚开始，打算做一个可展开和伸缩的，搜索时候发现CSDN有一篇美美哒程序媛写的Echarts Force力导向图实现节点可折叠。这里放上前辈的代码/**这段代码来自 http://blog.csdn.net/r4NqiAn/article/details/48320487Echarts-Force力导向布局图树状结构实现节点可折叠效果作...
echarts tree 点击节点收缩(关闭子节点)功能实现
08-18
实现echarts中的树形tree图的节点收缩功能,子节点最多支持扩展9个,通过value作为层级的标识.能够完美实现子节点的缩放功能.
ECharts折线图隐藏标点 隐藏圆点 隐藏折点 单独设置showSymbol没效果
m0_59250071的博客
12-01 3355
设置是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。ECharts 没有提供直接在单个数据点中设置 showSymbol 的方法。
echarts关系图 点击图例隐藏 修改
weixin_39143969的博客
01-31 4072
最近由于公司业务需要，要在Vue项目中修改echarts图表，把点击图例影藏对应的线换乘点击圆点隐藏 如下图： 废话不多说，直接上干货： drawLine(){ // var myChart = this.echarts.init(document.getElementById(′matrix′));varmatrix=this.echarts.init(document.getElementB...
<i> 标签怎么关闭_一起读 ECharts 配置项手册之 series「i」-line（上）
weixin_39616367的博客
11-20 537
之前的文章写得都比较杂，还总是想不到要写点什么……所以最近打算把 ECharts 所有系列挨个聊一遍，写一个 series 系列的简单介绍，解决一大段时间的难选题问题- -b，顺便方便比我还新的新手入门。正文​series[i]-line.typeseries[i]-line 也就是折线图/面积图，要使用折线图/面积图时，首先需要使用 series[i]-line 的第一个配置「type」，将其设...
ECharts 使用series.showSymbol隐藏所有数据点
旭东怪的博客
07-17 8974
原始效果图： 实现代码： var option = { title: { text: '第一个 ECharts 实例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: .
Echarts自定义tooltip显示内容（隐藏小圆点）
qq_38822390的博客
05-09 4512
修改左侧的tooltip的内容，添加formatter函数，循环将各个值拼接成一个字符串返回 tooltip: { formatter: function(param) { /*console.log(1); console.log(JSON.stringify(param));...
在 echarts关系图动态线上添加文字_多折线堆叠图如何制作？
weixin_39960503的博客
11-29 2166
润乾报表有丰富的图形展现效果，不仅自带了多种统计图形，还内置了第三方统计图形 D3 还有 echarts 统计图。最近好多客户提出想要实现多折线堆叠的统计图，我用自带的图形和 echarts 两种方式做了多折线堆叠的报表示例，和大家分享下。使用润乾自带的统计图实现多折线堆叠统计图新建一个报表，增加一个数据集，这里我用的是一个内建数据集，数据集的字段及字段类型如下图所示：数据形式如下图所示：润乾自带...
echart 怎么设置隐藏折线上的节点_小白也会的高大上图表制作方法
weixin_30709043的博客
12-28 2493
一提起图表，大部分人都会觉得制作起来非常的困难，今天教大家一些初学者也能做出高大上图表的方法。首先来看一下今天要讲解的其中一个图表的效果图。看到第一眼，是不是觉得非常高大上呢？这个是我在网上采集的数据，不过人家是用PS画出来的，那我们PPT该怎么实现，这种看起来很好看的效果呢？我们就拿这个看起来比较难的数据，来尝试做一下。那我们先开始动手做起来。01先给PPT背景设置成一样的蓝灰色背景。第一步，把...
如何让EasyUI的Tree或者ComboTree节点不显示图标？
weixin_30559481的博客
12-12 881
版本：jQuery EasyUI 1.3.2 通过测试，只需把节点的state属性设置为null即可使EasyUI的Tree或者ComboTree控件的节点不显示图标。 转载于:https://www.cnblogs.com/yitouniu/p/8028888.html...
echarts 关系图legend设置
最新发布
03-08
### 配置 ECharts 关系图中的 Legend 图例 在 ECharts 中，`legend` 组件用于显示图例组件，可以通过 `legend` 属性来定义其样式和行为。对于关系图而言，配置 `legend` 可以帮助用户更好地理解不同类型节点之间的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值