echarts树图，添加鼠标右键功能，弹出操作框

最新推荐文章于 2024-05-24 17:52:25 发布
最新推荐文章于 2024-05-24 17:52:25 发布
阅读量4.7k 收藏 23
点赞数 9
分类专栏： echarts 文章标签： echarts echarts右键菜单 echarts右键菜单隐藏悬停

首先看一下代码演示效果，如下图所示：

演示效果

接下来看代码：

1.css样式部分：

*{padding: 0;margin: 0;}
.menu{
    /*这个样式不写，右键弹框会一直显示在画布的左下角*/
    position: absolute;
    background: rgba(3,3,3,0.6);
    border-radius: 5px;
    left: -99999px;
    top: -999999px;
}
.menu ul{list-style: none}
.menu ul li{
    padding: 5px 10px;
    color: #ffff;
    border-bottom: 1px dashed #ffffff;
    font-size: 14px;
}
.menu ul li:last-child{
    border-bottom: none;
}

2.html部分：

<!--右键弹出菜单-->
<div id="rightMenu" class="menu" style="display: none;">
     <ul>
         <li>下线</li>
         <li>上线</li>
         <li>掉线</li>
     </ul>
</div>

3.js部分：

/**
* 鼠标右键，弹出右键操作菜单
*/
$("#main").bind("contextmenu", function () { return false; });//防止默认菜单弹出（查看图像,图像另存为等）
myChart.on("contextmenu", function(params){
    // console.log('params',params)
    $('#rightMenu').css({
        'display': 'block',
        'left': params.event.offsetX + 15,
        'top' : params.event.offsetY + 15
    });
    //todo 右键菜单刚弹出时，隐藏鼠标悬停菜单
    $("#main>div:nth-child(2)").hide();
});
/**
* 点击画布的时候隐藏右键菜单
*/
$('.tree-container').click(function () {
    $('#rightMenu').css({
        'display': 'none',
        'left': '-9999px',
        'top': '-9999px'
    });
});

4.完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/echars.js"></script>
    <style>
        *{padding: 0;margin: 0;}
        .menu{
            /*这个样式不写，右键弹框会一直显示在画布的左下角*/
            position: absolute;
            background: rgba(3,3,3,0.6);
            border-radius: 5px;
            left: -99999px;
            top: -999999px;
        }
        .menu ul{list-style: none}
        .menu ul li{
            padding: 5px 10px;
            color: #ffff;
            border-bottom: 1px dashed #ffffff;
            font-size: 14px;
        }
        .menu ul li:last-child{
            border-bottom: none;
        }
    </style>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div class="tree-container">
        <div id="main" style="width: 1000px;height:500px;"></div>
    </div>
    <!--右键弹出菜单-->
    <div id="rightMenu" class="menu" style="display: none;">
        <ul>
            <li>下线</li>
            <li>上线</li>
            <li>掉线</li>
        </ul>
    </div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
		var data = {
            "name": "外部网络",
            "type":"Internet",
            "symbol": 'image://image/internet.png',
            "children": [
                {
                    "name": "交换机",
                    "type":"switch",
                    "IP":"192.168.30.126",
                    "MAC":"b0:98:6e:bf:6r:4c",
                    "deviceType":"交换机",
                    "deviceNum":"HUAWEI",
                    "symbol": 'image://image/switch.png',
                    "children": [
                        {
                            "name": "笔记本",
                            "type":"network",
                            "IP":"192.168.30.126",
                            "MAC":"b0:98:6e:bf:6r:4c",
                            "deviceType":"笔记本",
                            "account":"xiaox",
                            "location":"204",
                            "lastLoginTime":"2020-8-26",
                            "symbol": 'image://image/network.png',
                        },
                        {
                            "name": "计算机",
                            "type":"computer",
                            "IP":"192.168.30.126",
                            "MAC":"b0:98:6e:bf:6r:4c",
                            "deviceType":"计算机",
                            "account":"xiaox",
                            "location":"204",
                            "lastLoginTime":"2020-8-26",
                            "symbol": 'image://image/computer.png',
                            "children": [
                                {
                                    "name": "计算机1",
                                    "type":"computer",
                                    "IP":"192.168.30.126",
                                    "MAC":"b0:98:6e:bf:6r:4c",
                                    "deviceType":"计算机1",
                                    "account":"xiaox",
                                    "location":"204",
                                    "lastLoginTime":"2020-8-26",
                                    "symbol": 'image://image/computer.png',
                                },
                                {
                                    "name": "计算机2",
                                    "type":"computer",
                                    "IP":"192.168.30.126",
                                    "MAC":"b0:98:6e:bf:6r:4c",
                                    "deviceType":"计算机2",
                                    "account":"xiaox",
                                    "location":"204",
                                    "lastLoginTime":"2020-8-26",
                                    "symbol": 'image://image/computer.png',
                                },
                                {
                                    "name": "计算机3",
                                    "type":"computer",
                                    "IP":"192.168.30.126",
                                    "MAC":"b0:98:6e:bf:6r:4c",
                                    "deviceType":"计算机3",
                                    "account":"xiaox",
                                    "location":"204",
                                    "lastLoginTime":"2020-8-26",
                                    "symbol": 'image://image/computer.png',
                                },
                                {
                                    "name": "计算机4",
                                    "type":"computer",
                                    "IP":"192.168.30.126",
                                    "MAC":"b0:98:6e:bf:6r:4c",
                                    "deviceType":"计算机4",
                                    "account":"xiaox",
                                    "location":"204",
                                    "lastLoginTime":"2020-8-26",
                                    "symbol": 'image://image/computer.png',
                                }
                            ]
                        },
                        {
                            "name": "路由器",
                            "type":"rooter",
                            "IP":"192.168.30.126",
                            "MAC":"b0:98:6e:bf:6r:4c",
                            "deviceType":"路由器",
                            "account":"xiaox",
                            "location":"204",
                            "lastLoginTime":"2020-8-26",
                            "symbol": 'image://image/rooter.png',
                        },
                        {
                            "name": "服务器",
                            "type":"service",
                            "IP":"192.168.30.126",
                            "MAC":"b0:98:6e:bf:6r:4c",
                            "deviceType":"服务器",
                            "account":"xiaox",
                            "location":"204",
                            "lastLoginTime":"2020-8-26",
                            "symbol": 'image://image/service.png',
                        },
                        {
                            "name": "打印机",
                            "type":"print",
                            "IP":"192.168.30.126",
                            "MAC":"b0:98:6e:bf:6r:4c",
                            "deviceType":"打印机",
                            "account":"xiaox",
                            "location":"204",
                            "lastLoginTime":"2020-8-26",
                            "symbol": 'image://image/print.png',
                        },
                        {
                            "name": "计算机",
                            "type":"computer",
                            "IP":"192.168.30.126",
                            "MAC":"b0:98:6e:bf:6r:4c",
                            "deviceType":"计算机",
                            "account":"xiaox",
                            "location":"204",
                            "lastLoginTime":"2020-8-26",
                            "symbol": 'image://image/computer.png',
                        }
                    ]
                },
                {
                    "name": "无线交换机",
                    "type":"switch",
                    "IP":"192.168.30.126",
                    "MAC":"b0:98:6e:bf:6r:4c",
                    "deviceType":"交换机",
                    "deviceNum":"HUAWEI",
                    "symbol": 'image://image/switch.png',
                    "children": [
                        {
                            "name": "手机",
                            "type":"phone",
                            "IP":"192.168.30.126",
                            "MAC":"b0:98:6e:bf:6r:4c",
                            "deviceType":"手机",
                            "account":"xiaox",
                            "location":"204",
                            "lastLoginTime":"2020-8-26",
                            "symbol": 'image://image/phone.png',
                        },
                        {
                            "name": "平板",
                            "type":"phone",
                            "IP":"192.168.30.126",
                            "MAC":"b0:98:6e:bf:6r:4c",
                            "deviceType":"平板",
                            "account":"xiaox",
                            "location":"204",
                            "lastLoginTime":"2020-8-26",
                            "symbol": 'image://image/phone.png',
                        }
                    ]
                },
                {
                    "name": "hub",
                    "type":"hub",
                    "symbol": 'image://image/hub.png',
                    "children": [
                        {
                            "name": "计算机",
                            "type":"computer",
                            "IP":"192.168.30.126",
                            "MAC":"b0:98:6e:bf:6r:4c",
                            "deviceType":"计算机",
                            "account":"xiaox",
                            "location":"204",
                            "lastLoginTime":"2020-8-26",
                            "symbol": 'image://image/computer.png',
                        },
                        {
                            "name": "笔记本",
                            "type":"phone",
                            "IP":"192.168.30.126",
                            "MAC":"b0:98:6e:bf:6r:4c",
                            "deviceType":"手机",
                            "account":"xiaox",
                            "location":"204",
                            "lastLoginTime":"2020-8-26",
                            "symbol": 'image://image/phone.png',
                        },
                        {
                            "name": "打印机",
                            "type":"print",
                            "IP":"192.168.30.126",
                            "MAC":"b0:98:6e:bf:6r:4c",
                            "deviceType":"打印机",
                            "account":"xiaox",
                            "location":"204",
                            "lastLoginTime":"2020-8-26",
                            "symbol": 'image://image/print.png',
                        },
                        {
                            "name": "路由器",
                            "type":"rooter",
                            "IP":"192.168.30.126",
                            "MAC":"b0:98:6e:bf:6r:4c",
                            "deviceType":"路由器",
                            "account":"xiaox",
                            "location":"204",
                            "lastLoginTime":"2020-8-26",
                            "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,//修改鼠标悬停显示的内容
	       },
	        series: [
	            {
	                type: 'tree',
	                data: [data],
	                top: '1%',
	                left: '7%',
	                bottom: '1%',
	                right: '20%',
	                label: {
	                    position: 'left',
	                    verticalAlign: 'middle',
	                    align: 'right',
	                    fontSize: 9
	                },
	                leaves: {
	                    label: {
	                        position: 'right',
	                        verticalAlign: 'middle',
	                        align: 'left'
	                    }
	                },
                    symbolSize: [30, 30],
	                edgeForkPosition: "72%",
	                roam:true,//鼠标缩放，拖拽整颗树
	                expandAndCollapse: true,//无关的子树折叠收起
	                animationDuration: 550,
	                animationDurationUpdate: 750,
	                width: "50%"//组件宽度
	            }
	        ]
		}
        /**
         * 鼠标悬停时显示详情
         */
		function formatterHover(params){
		    // console.log(params);
		    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="position: relative;top: -10px;padding:0 5px;">'+ params.data.name+'</span>';
                // return firstParams.name + '  ' + firstParams.seriesName + '<br>' + '装机：' + firstParams.data + ' 亿千瓦<br>增长率：' + sndParams.data +' %';
            }  if (deviceType === 'switch'){
                return "<img src='"+imgPathSrc+" ' width='30px' height='30px'>" + '<span style="position: relative;top: -10px;padding: 0 5px;">设备类型：'+ params.data.name+'</span>'+ '<br>'
                    + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">IP：'+ params.data.IP+'</span>'+ '<br>'
                    + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">MAC：'+ params.data.MAC+'</span>'+ '<br>'
                    + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">设备型号：'+ params.data.deviceNum+'</span>';
            }else{
                return "<img src='"+imgPathSrc+" ' width='30px' height='30px'>" + '<span style="position: relative;top: -10px;padding: 0 5px;">设备类型：'+ params.data.name+'</span>'+ '<br>'
                    + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">IP：'+ params.data.IP+'</span>'+ '<br>'
                    + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">MAC：'+ params.data.MAC+'</span>'+ '<br>'
                    + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">账号：'+ params.data.account+'</span>'+ '<br>'
                    + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">所在位置：'+ params.data.location+'</span>'+ '<br>'
                    + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">最后登录时间：'+ params.data.lastLoginTime+'</span>';
            }
        }
        /**
		 * 鼠标右键，弹出右键操作菜单
		 */
		$("#main").bind("contextmenu", function () { return false; });//防止默认菜单弹出（查看图像,图像另存为等）
	    myChart.on("contextmenu", function(params){
            // console.log('params',params)
            $('#rightMenu').css({
                'display': 'block',
                'left': params.event.offsetX + 15,
                'top' : params.event.offsetY + 15
            });
            //todo 右键菜单刚弹出时，隐藏鼠标悬停菜单
            $("#main>div:nth-child(2)").hide();
	    });
        /**
         * 点击画布的时候隐藏右键菜单
         */
        $('.tree-container').click(function () {
            $('#rightMenu').css({
                'display': 'none',
                'left': '-9999px',
                'top': '-9999px'
            });
        });
		/**
		 * 解决echarts图片首次加载不显示的问题
		 */
		setTimeout(function(){
		     $(myChart).resize();     
		},200);
		/**
		 * 解决点击父节点合并或展开后子节点图片不显示的问题
		 */
		$(window).on('click',function(){
			$(myChart).resize();
		});
	    myChart.setOption(option);
    </script>
</body>
</html>

5.参考地址：https://www.cnblogs.com/zhaoweikai/p/9950691.html

 

笑到世界都狼狈
关注
  • 9
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
js实现右键弹出自定义的菜单
HaiRong_21的博客
09-09 2457
js实现右键弹出自定义的菜单 实现的步骤：1、首先阻止右键弹出系统默认的菜单 2、自定义菜单并隐藏 3、点击右键弹出自定义菜单 4、点击桌面除菜单任意位置，菜单隐藏，点击菜单，菜单不隐藏。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca
echarts - 鼠标事件详解
kelly0721的博客
03-14 2782
echarts 鼠标点击事件
echarts右键菜单实例 --- 不修改源码
12-22
echarts 右键菜单实例，不修改源码
echarts-树图、关系图、桑基图、日历图
最新发布
m0_74019046的博客
05-24 1084
树图主要用来表达关系结构。树图的端点也收symbol的调节没有子节点的要叶子节点leave树图中的data只能有一个数据layout：树图的布局，有 正交 和 径向 两种，默认情况下是’orthogonal’正交布局，'radial’是径向布局。:在 layout = ‘orthogonal’ 的时候，该配置项才生效，在水平方向的排列方式。取值有’LR’ （从左到右）, ‘RL’（从右到左）, ‘TB’（从上到下）, ‘BT’（从下到上）。：树图初始展开的层级（深度）。
echar2 ，3 自定义右键菜单 右击事件
weixin_38951735的博客
12-06 2278
echarts2右键实现 在echarts2.x 的版本中对于开发者是不支持自定义右击事件的，但是可通过修改源码来实现效果； echarts2.x源码修改文件有config.js和echarts.js文件两个部分； 1、修改源码文件config.js config.js文件主要是开放给开发者可调用的属性和方法，用来处理用户的选择。首先需要开放一个右键动作给开发者调用： 给config文件注册右键...
echarts实现右键点击事件，并弹出自定义弹框，点击自定义弹框里边的按钮。更改折线图点的数据和样式。当右键点击别的点的时候，把上一次打开的自定义对话框关闭掉。
u010782109的博客
04-19 568
【代码】echarts实现右键点击事件，并弹出自定义弹框，点击自定义弹框里边的按钮。更改折线图点的数据和样式。当右键点击别的点的时候，把上一次打开的自定义对话框关闭掉。
echarts树图实现点击收缩子节点
05-02
在JavaScript可视化库ECharts中，树图是一种常用于展示层次结构数据的图表类型。本教程将详细介绍如何在ECharts树图中实现点击节点时收缩其子节点的功能。首先，我们需要理解ECharts的基本概念和树图的特性。 ...
echarts组织结构图及自定义右键菜单
12-27
ECharts本身并不直接提供右键菜单的功能，但你可以通过监听鼠标事件来实现这一功能。在ECharts实例上注册`oncontextmenu`事件，当用户在图表上右击时，这个事件会被触发。然后，你可以弹出一个自定义的菜单，提供一...
echarts树图tree制作家谱源码.zip
06-22
标题中的“echarts树图tree制作家谱源码”指的是使用ECharts库中的Tree图表功能来构建一个家谱展示的应用。ECharts是一个基于JavaScript的数据可视化库，它支持丰富的交互功能和多种图表类型，包括树图（Tree）。...
基于ECharts V4.2的树图可视化设计与实现
04-15
在本文中，我们将深入探讨如何使用ECharts V4.2版本进行树图的可视化设计与实现。ECharts是一个由百度开发的开源JavaScript图表库，它提供了丰富的图表类型，包括柱状图、折线图、饼图以及我们关注的树图等。ECharts...
Echarts-all，修改了源码，添加鼠标右键监听
12-20
百度Echarts文件，修改源码，添加了鼠标右键事件。 调用方式与其他官方方法一样。 实例：myChart.on(ecConfig.CONTEXTMENU, myfunction); （CONTEXTMENU为右键事件名称） ，（myfunction为自定义事件） function myfunction(param){ 逻辑代码 }
echart树图：曲线换成直角线版本.zip
11-09
ECharts是一个由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型和强大的交互功能，适用于各种Web应用程序。 首先，我们需要了解ECharts中的树图（Tree）组件。树图是一种用于展示层次结构数据的...
Echarts树图定制详解
u010565037的博客
11-07 2408
目录 一 说明 二 代码下载 三 全局变量名修改 四 hover菜单 五 右键菜单 六 缩放功能 七 文字过滤高亮 八 各级文字位置设置 八 完整示例代码 本文讲的是如何定制Echarts的tree图。主要包括下载、全局变量名修改、左键菜单添加、右键菜单添加、内容缩放、文本过滤高亮等。 一 说明 Echarts中提供了tree图，但实际项目中，该tree图并不一定能完全满足...
echarts柱状图可鼠标左击出现自定义弹框，右击隐藏弹框并阻止默认右击事件
苦瓜_小学生的博客
03-05 1955
echarts柱状图可鼠标左击出现自定义弹框，右击隐藏弹框并阻止默认右击事件 chart.on与chart.getZr().on的区别 click单击以及contextmenu右键单击事件 echarts的鼠标事件 设置被点击盒子的显示位置，设定其top值及left值 添加自定义类名可通过divdom.classList.add(“类名”) divdom.style.cssText 单引号与反引号的区别 removeChild 方法删除子节点
vue-context-menu 右击菜单 + 给eCharts增加右击效果 + 好看的右击菜单样式
tangyuan的博客
03-01 6679
安装 npm install @xunlei/vue-context-menu 在组件代码中引用 <script> import { component as VueContextMenu } from '@xunlei/vue-context-menu' export default{ 'vue-context-menu': VueContextMenu } </scrip...
echarts点击图形显示弹窗(自定义弹窗样式)
热门推荐
ydZ157的博客
11-16 1万+
echarts点击图形板块区域，弹出自定义弹窗
echarts实现点击事件弹框
weixin_46077728的博客
01-21 2505
需求：点击echarts绘制的折线图或者散点图上的点实现js弹框 cutChart.on('click',(params)=>{ var seriesName = params.seriesName var data = params.data if (seriesName ==="ecg"){ this.$confirm('当前可新增
echarts tree树形结构图
weixin_43294560的博客
08-05 6641
具有唯一的根节点 1、配置data data:[ { name: "flare", 根节点名称 label: { 此节点特殊的 label 配置（如果需要的话）。 ... }, itemStyle: {}, value: 4116, value 值,只在tooltip中显示 collapsed: null, 如果为true,表示此节点默认折叠。
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树图中实现点击按钮实现放大缩小全屏功能了。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值