echarts树图实现搜索查询功能

已于 2022-11-09 08:50:01 修改
阅读量2.9k 收藏 11
点赞数 3
分类专栏： echarts 文章标签： echarts树图实现搜索查询 高亮 自定义节点图片 导出png 刷新
于 2022-05-15 10:15:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36509946/article/details/124754773
版权

1.看了官方文档，没看到有内置好的搜索查询功能，就想办法自己写了一个简单的搜索查询功能，具体实现效果如下：

2，主要代码包括以下HTML和JS部分：

html部分：

<div class="tree-container">
    <input type="text" id="inputSearch" placeholder="请输入名称"><button id="btnSearch">搜索</button>
    <div id="main" style="width: 1000px;height:600px;"></div>
</div>

js部分：

因为我初始化的时候设置显示了3层节点，其余部分隐藏起来了，所以我在搜索的时候加了一个展开所有层级的方法，如果初始设置的是展开所有层级，即：initialTreeDepth: -1，就不需要设置展开层级了

/**
* 搜索按钮点击事件
* 通过遍历节点对象中的name和文本框中的value值做对比
* 如果包含input的value值，则给当前对象添加color和fontSize属性
* else设置color和fontSize属性为默认样式
*/
$("#btnSearch").on('click',function () {
    console.log('data', data)
    var num = 0; // 记录查询到节点的数量
    function readNodes (nodes) {
        for (let item of nodes) { // js遍历树形数组结构
            if (item.children && item.children.length){
                readNodes(item.children)
            }
            // 查询，名称中包含输入值就修改label颜色和字体大小
            if (item.name.indexOf($("#inputSearch").val()) >=0  && $("#inputSearch").val() != ''){
                item.label = {
                    color: 'red',
                    fontSize: '15'
                };
                num++;
            } else { // 否则为默认颜色和大小
                item.label = {
                    color: '#666',
                    fontSize: '9'
                };
            }
        }
    }
    readNodes([data]) // 调用时，要给data加[],因为原本的data不是一个正常的数组结构
    if (num > 0) { // 查询节点数量大于0的时候展开所有层级
        option.series[0].initialTreeDepth = -1;
    } else { // 否则恢复初始的层级
        option.series[0].initialTreeDepth = 2;
    }
    myChart.setOption(option); // 重新设置一遍树图，不然不起效果
});
/**
* 搜索回车事件
*/
$('.tree-container').keydown(function(event){
    if(event.keyCode==13){
        $("#btnSearch").click();
    }
});

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <!--2.0版本的echarts不兼容高亮-->
    <!--<script type="text/javascript" src="js/echars.js"></script>-->
    <!--直接cdn引入的echarts-->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <style>
        *{padding: 0;margin: 0;}
    </style>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div class="tree-container">
    <input type="text" id="inputSearch" placeholder="请输入名称"><button id="btnSearch">搜索</button>
    <div id="main" style="width: 1000px;height:600px;"></div>
</div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var data = {
        "id": "0",
        "name": "外部网络",
        "type":"Internet",
        "symbol": 'image://image/internet.png',
        "children": [
            {
                "id": "1",
                "name": "交换机",
                "type":"switch",
                "IP":"192.168.30.126",
                "MAC":"b0:98:6e:bf:6r:4c",
                "deviceType":"交换机",
                "deviceNum":"HUAWEI",
                "symbol": 'image://image/switch.png',
                "children": [
                    {
                        "id": "2",
                        "name": "笔记本",
                        "type":"switch",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "symbol": 'image://image/network.png',
                    },
                    {
                        "id": "3",
                        "name": "计算机",
                        "type":"computer",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "symbol": 'image://image/computer.png',
                        "children": [
                            {
                                "id": "4",
                                "name": "计算机1",
                                "type":"computer",
                                "IP":"192.168.30.126",
                                "MAC":"b0:98:6e:bf:6r:4c",
                                "symbol": 'image://image/computer.png',
                            },
                            {
                                "id": "5",
                                "name": "计算机2",
                                "type":"computer",
                                "IP":"192.168.30.126",
                                "MAC":"b0:98:6e:bf:6r:4c",
                                "symbol": 'image://image/computer.png',
                            },
                            {
                                "id": "6",
                                "name": "计算机3",
                                "type":"computer",
                                "IP":"192.168.30.126",
                                "MAC":"b0:98:6e:bf:6r:4c",
                                "symbol": 'image://image/computer.png',
                            },
                            {
                                "id": "7",
                                "name": "计算机4",
                                "type":"computer",
                                "IP":"192.168.30.126",
                                "MAC":"b0:98:6e:bf:6r:4c",
                                "lastLoginTime":"2020-8-26",
                                "symbol": 'image://image/computer.png',
                            }
                        ]
                    },
                    {
                        "id": "8",
                        "name": "路由器",
                        "type":"rooter",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"路由器",
                        "symbol": 'image://image/rooter.png',
                    },
                    {
                        "id": "9",
                        "name": "服务器",
                        "type":"service",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"服务器",
                        "symbol": 'image://image/service.png',
                    },
                    {
                        "id": "10",
                        "name": "打印机",
                        "type":"print",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"打印机",
                        "symbol": 'image://image/print.png',
                    },
                    {
                        "id": "11",
                        "name": "计算机",
                        "type":"computer",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "lastLoginTime":"2020-8-26",
                        "symbol": 'image://image/computer.png',
                    }
                ]
            },
            {
                "id": "12",
                "name": "无线交换机",
                "type":"switch",
                "IP":"192.168.30.126",
                "MAC":"b0:98:6e:bf:6r:4c",
                "deviceType":"交换机",
                "deviceNum":"HUAWEI",
                "symbol": 'image://image/switch.png',
                "children": [
                    {
                        "id": "13",
                        "name": "手机",
                        "type":"phone",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"手机",
                        "symbol": 'image://image/phone.png',
                    },
                    {
                        "id": "14",
                        "name": "平板",
                        "type":"phone",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"平板",
                        "symbol": 'image://image/phone.png',
                    }
                ]
            },
            {
                "id": "15",
                "name": "hub",
                "type":"hub",
                "symbol": 'image://image/hub.png',
                "children": [
                    {
                        "id": "16",
                        "name": "计算机",
                        "type":"computer",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"计算机",
                        "symbol": 'image://image/computer.png',
                    },
                    {
                        "id": "17",
                        "name": "笔记本",
                        "type":"phone",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"手机",
                        "symbol": 'image://image/phone.png',
                    },
                    {
                        "id": "18",
                        "name": "打印机",
                        "type":"print",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"打印机",
                        "symbol": 'image://image/print.png',
                    },
                    {
                        "id": "19",
                        "name": "路由器",
                        "type":"rooter",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"路由器",
                        "symbol": 'image://image/rooter.png',
                    }
                ]
            }
        ]
    };
    //    页面初始化的时候,隐藏奇数位的子节点
    //    echarts.util.each(data.children, function (datum, index) {
    //         index % 2 === 0 && (datum.collapsed = true);
    //     });
    //         console.log('data',data);
    //        console.log('link',link);
    var option = {
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove',
            enterable:true,//鼠标是否可进入提示框浮层中
            formatter:formatterHover,//修改鼠标悬停显示的内容
        },
        toolbox: {
            show: true,
            top:20,
            left:20,
            feature: {
                restore: {
                    title:'刷新'//刷新echarts图标
                },
                saveAsImage: {
                    title:'下载图片',//鼠标悬停在下载图标上时，显示的文字
                    name:'network-topology'//下载图片的文件名为network-topology.png
                }
            }
        },
        series: [
            {
                type: 'tree',
                data: [data],
                top: '1%',
                left: '7%',
                bottom: '1%',
                right: '20%',
                // layout: 'radial',
                label: {
                    position: 'left',
                    verticalAlign: 'middle',
                    align: 'right',
                    color: '#666',
                    fontSize: 9
                },
                leaves: {
                    label: {
                        position: 'right',
                        verticalAlign: 'middle',
                        align: 'left'
                    }
                },
                symbolSize: [30, 30],
                edgeForkPosition: "72%",
                emphasis: { // 高亮
                    focus: 'descendant'
                },
                initialTreeDepth:2, // 树图初始展开层级
                roam:true,//鼠标缩放，拖拽整颗树
                expandAndCollapse: true,//无关的子树折叠收起
                animationDuration: 550,
                animationDurationUpdate: 750,
                width: "50%"//组件宽度
            }
        ]
    };
    /**
     * 鼠标悬停时显示详情
     */
    function formatterHover(params){
        // console.log(params.collapsed);
        var deviceType = params.data.type;
        var imgPath = params.data.symbol;
        //图片地址截取，因为echarts修改图片的时候有一个------image://---前缀，前缀后面的才是图片真正的地址
        var imgPathSrc = imgPath.split("image://")[1];
        // console.log('str',imgPathSrc);
        if (deviceType === 'Internet' || deviceType === 'hub'){
            return "<img src='"+imgPathSrc+" ' width='30px' height='30px'>" + '<span style="padding:0 5px;font-size: 14px;">'+ params.data.name+'</span>';
        }  if (deviceType === 'switch'){
            return "<img src='"+imgPathSrc+" ' width='30px' height='30px'>" + '<span style="padding: 0 5px;font-size: 14px;">设备类型：'+ params.data.name+'</span>'+ '<br>'
                + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;font-size: 14px;">IP：'+ params.data.IP+'</span>'+ '<br>'
                + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;font-size: 14px;">MAC：'+ params.data.MAC+'</span>'+ '<br>';
                // +'<button style="padding:2px 5px;border:none;outline:none;color:#ffffff;border-radius: 5px;background:rgba(0,0,0,0.5);"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> IP列表</button>'
                // +'<button style="padding:2px 5px;border:none;outline:none;color:#ffffff;border-radius: 5px;background:rgba(0,0,0,0.5);margin-left: 10px;"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> MAC列表</button>';
        }else{
            return "<img src='"+imgPathSrc+" ' width='30px' height='30px'>" + '<span style="padding: 0 5px;font-size: 14px;">设备类型：'+ params.data.name+'</span>'+ '<br>'
                + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;font-size: 14px;">IP：'+ params.data.IP+'</span>'+ '<br>'
                + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;font-size: 14px;">MAC：'+ params.data.MAC+'</span>'+ '<br>';
        }
    }
    /**
     * 解决echarts图片首次加载不显示的问题
     */
    setTimeout(function(){
        $(myChart).resize();
    },200);
    /**
     * 解决点击父节点合并或展开后子节点图片不显示的问题
     */
    $(window).on('click',function(){
        $(myChart).resize();
    });
    myChart.setOption(option);
    /**
     * 搜索按钮点击事件
     * 通过遍历节点对象中的name和文本框中的value值做对比
     * 如果包含input的value值，则给当前对象添加color和fontSize属性
     * else设置color和fontSize属性为默认样式
     */
    $("#btnSearch").on('click',function () {
        console.log('data', data)
        var num = 0; // 记录查询到节点的数量
        function readNodes (nodes) {
            for (let item of nodes) { // js遍历树形数组结构
                if (item.children && item.children.length){
                    readNodes(item.children)
                }
                // 查询，名称中包含输入值就修改label颜色和字体大小
                if (item.name.indexOf($("#inputSearch").val()) >=0  && $("#inputSearch").val() != ''){
                    item.label = {
                        color: 'red',
                        fontSize: '15'
                    };
                    num++;
                } else { // 否则为默认颜色和大小
                    item.label = {
                        color: '#666',
                        fontSize: '9'
                    };
                }
            }
        }
        readNodes([data]) // 调用时，要给data加[],因为原本的data不是一个正常的数组结构
        if (num > 0) { // 查询节点数量大于0的时候展开所有层级
            option.series[0].initialTreeDepth = -1;
        } else { // 否则恢复初始的层级
            option.series[0].initialTreeDepth = 2;
        }
        myChart.setOption(option); // 重新设置一遍树图，不然不起效果
    });
    /**
     * 搜索回车事件
     */
    $('.tree-container').keydown(function(event){
        if(event.keyCode==13){
            $("#btnSearch").click();
        }
    });
</script>
</body>
</html>
笑到世界都狼狈
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echarts的简单使用
c15162的博客
05-19 1321
最近做了一个简单的数据统计页面，首选Echarts 先看一下图1吧 这个统计很简单 就是统计人员的发帖量和关注量 然后点击年份的时候可以查看当前年 十二个月的数据如图2 首先去Echarts下载最新版本：Echarts下载 目前我使用的是最新版本：echarts-5.3.2 下载后解压文件如下图 进入dist文件夹 将echarts.js或echarts.min.js放到项目中的js文件夹里 方便使用 前台代码HTML： <!-- 面板开始 --> <div class="fo
echarts map+散点图 按条件查询并动态显示结果
Masli的博客
08-30 3374
想法：从后台将数据显示到map上，同时可以根据查询条件进行查询并动态展示数据。 页面代码 &lt;!DOCTYPE html&gt; &lt;html xmlns:th="http://www.thymeleaf.org"&gt; &lt;head th:fragment="header"&gt; &lt;meta charset="utf-8"&gt;
eCharts给图标添加边框
m0_61265297的博客
11-08 2357
【代码】eCharts给图标添加边框。
查询---查询+echarts交互
DanBo_C的博客
08-10 1542
1.效果图 2.注意 加载模块时，只能有一种采用配置路径加载。 为什么呢？ 例如，ArcJS的模块加载路径是在https://js.arcgis.com/3.28/，如果echarts也采用这种方法加载模块，那么便会出现这种情况，例如加载echarts.min.js包，在浏览器开发者模式下NetWork中的该资源的下载路径是https://js.arcgis.com/3.28/echarts.m...
echarts柱状图多个联合查询，自定义echarts底部区间，后台根据区间查询数据
最新发布
凉梦的博客
05-07 526
需要引入的有layui.css，jquery-1.7.2.min.js，layui.js，echarts.min.js，其中index.css是自己写的样式，这里放在后面连接，有需要的可以自己下载。2.建完表以后，生成基础代码，这里直接讲页面的写法，这个页面整体样式使用layui的布局，页面上有些基础样式，不需要可以去除，layui需要引入。3.这部分是查询条件，如果需要更改查询条件，在这部分删改，样式使用的是layui的样式，不用动，直接复制到页面上，引入css就可以。下面是oracle表设计。
echarts+asp查询应用
07-14
echarts+asp查询应用echarts+asp查询应用echarts+asp查询应用，百度echarts,建议如果后台需要做数据分析可以使用，支持asp、php、jsp、jspssh等框架。
echarts-tree：树图(带查询条件的导航图)
WZY_snail的博客
07-15 5531
echarts官网： http://echarts.apache.org/zh/index.html 树图网址： https://echarts.apache.org/examples/zh/index.html#chart-type-tree echarts图例参数介绍网址: https://echarts.apache.org/zh/option.html#series-tree 使用echarts配置图需要下载echarts.js包，用到什么图就下载什么的echarts.js就..
Eharts的条件查询-ajax获取后台信息
AADDDD5的博客
06-24 390
首先条件查询是通过按钮查询的最后，所以第一件要做的事是给按钮添加事件 目前我的例子中添加了个方法，可以查看其中的一个例子 //柱形图 function Month() { $(function() { //var echarts = echarts.init($('#pid-div')[0]); var myChart = echarts.init($('...
echarts树图实现点击收缩子节点
05-02
本教程将详细介绍如何在ECharts树图中实现点击节点时收缩其子节点的功能。首先，我们需要理解ECharts的基本概念和树图的特性。 ECharts是一款由百度开发的开源JavaScript图表库，它提供了丰富的图表类型，如柱状图...
基于ECharts V4.2的树图可视化设计与实现
04-15
在本文中，我们将深入探讨如何使用ECharts V4.2版本进行树图的可视化设计与实现。ECharts是一个由百度开发的开源JavaScript图表库，它提供了丰富的图表类型，包括柱状图、折线图、饼图以及我们关注的树图等。ECharts...
echarts树图tree制作家谱源码.zip
06-22
标题中的“echarts树图tree制作家谱源码”指的是使用ECharts库中的Tree图表功能来构建一个家谱展示的应用。ECharts是一个基于JavaScript的数据可视化库，它支持丰富的交互功能和多种图表类型，包括树图（Tree）。...
echart树图：曲线换成直角线版本.zip
11-09
ECharts是一个由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型和强大的交互功能，适用于各种Web应用程序。 首先，我们需要了解ECharts中的树图（Tree）组件。树图是一种用于展示层次结构数据的...
使用echarts实现双向柱状图
09-02
1、文件夹下载下来后直接双击html文件即可... 2、项目中多次使用，保证稳定； 3、代码中有详细的介绍说明； 4、可以单独拿出来作为插件使用； 5、echarts基本图例里面不存这个图形; 6、有问题欢迎留言，看到会解答；
Echarts -- 条件查询ajax动态获取数据
孺牛的博客
12-22 4819
  最近因为需要用到了Echarts这个插件，下面是自己的一点使用心得效果图：直接上代码：js：&lt;%@ page import="org.apache.commons.lang3.RandomStringUtils" %&gt; &lt;%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="u...
vue中的echarts图可根据关键词、月份范围进行搜索，还包含了简陋的带推荐搜索的输入框
m0_66970189的博客
08-14 1380
这次的小案例中包含了很多的bug，我只是提供了一种思路，如果大家有什么修改意见，可以留言，真的写的太简陋了，还有很多明显的bug因为时间原因，没能够去完善，实在抱歉以下的代码是写在一个组件之中的，另外还需要elementUI的配合template代码。...
vue中使用echarts，根据选择条件动态展示echarts图表
m0_62317155的博客
02-18 3822
echarts根据选择条件展示echarts图表
Spring boot +Echarts 柱状图+时间条件查询
分享日常bug
03-07 781
文件下载 提取码：z8ac
echarts的使用，配合搜索，搜索后echarts反应的搜索数据
qq_45837267的博客
03-28 621
注意：在mounted调用，因为在放入echarts图前，要准备好一个有宽高的dom节点，而mounted就是dom挂载时期的钩子函数，created时期dom还未进行任何渲染，所以如果要在created时期就使用echarts，那就要在created里加$nextTick。定义一个方法serch()，点击搜索按钮后时触，重新调用接口 getOrderTotal()，重新渲 染数据页面。逻辑是：定义一个方法draw()，调用echarts。
echart单系列柱状图增加配置筛选legend
M_yI_Hg的博客
07-15 2028
第一步： 第二步：
echarts树图 点击按钮实现放大缩小全屏功能
09-06
echarts树图的放大缩小全屏功能可以通过以下步骤实现： 1. 首先，在echarts树图所在的容器中添加一个按钮，用于控制放大缩小全屏功能的开启和关闭。 2. 接下来，在代码中监听按钮的点击事件。 3. 当按钮点击时，通过echarts提供的API，获取到echarts实例。 4. 通过设置echarts实例的option中的zoom属性来实现放大缩小功能。可以通过修改zoom属性的值来控制图表的大小，从而实现放大和缩小。 5. 同时，还可以设置echarts实例的renderer属性为'canvas'，以确保在放大和缩小过程中图表的质量不受影响。 6. 当点击按钮时，切换按钮的显示文字，以提示用户当前状态是放大还是缩小。 7. 最后，还可以通过设置echarts实例的全屏属性来实现全屏功能。可以通过切换容器的样式或者调用浏览器的全屏API来实现。 总的来说，通过监听按钮点击事件，修改echarts实例的zoom属性和renderer属性来实现放大缩小功能，并通过切换全屏属性来实现全屏功能。这样，就可以在echarts树图中实现点击按钮实现放大缩小全屏功能了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值