echarts修改鼠标悬停在节点上时显示的内容，自定义鼠标悬停显示内容

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

代码部分：

1.在option对象下的tooltip对象中添加formatter函数，代码如下：

var option = {tooltip: {trigger: 'item',triggerOn: 'mousemove',enterable:true,//鼠标是否可进入提示框浮层中formatter:formatterHover,//修改鼠标悬停显示的内容},
}

2.编写formatter函数，根据自己的需求编写，代码如下：

/**
* 鼠标悬停时显示详情*/
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>';}  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>';}
}

3.完整代码如下：

注：

1.代码中的图片是本地image文件夹下的图片，直接运行图片应该会报错，放到idea或Visual Studio Code下运行不会报错

2.image下的图片要换成自己文件夹下的图片，如果不想换，可参考我另一篇文章，用服务器图片：

https://blog.csdn.net/qq_36509946/article/details/108219598

<!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>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 1000px;height:500px;"></div><div class="right-click-menu" style="display: none;padding: 5px;border: 1px solid #CCCCCC;width: 200px;">右键操作菜单</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);
//      });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>';}}/*** 解决echarts图片首次加载不显示的问题*/setTimeout(function(){$(myChart).resize();     },200)/*** 解决点击父节点合并或展开后子节点图片不显示的问题*/$(window).on('click',function(){$(myChart).resize();})myChart.setOption(option);</script>
</body>
</html>

echarts修改鼠标悬停在节点上时显示的内容，自定义鼠标悬停显示内容相关推荐

java鼠标经过时变色_将鼠标悬停在标签上时，鼠标指针会变为手形
您可能在某些浏览器中获得手形光标的原因是因为大多数浏览器中标签元素的主要用途之一是为表单输入元素提供可单击的描述 . 例如,这是元素的典型用法: I agree to these terms 在大多 ...
AD19实时高亮显示网络，当鼠标悬停在网络上时能自动高亮
今天检查电路时发现有网络,没连接到,很伤心,发现这是版本的问题AD16能实时高亮显示而AD19不能 S+P选住某个网络,与CTRL+H相同效果 CTRL+鼠标左键也可以显示但这都不是我想要的效果,我 ...
html鼠标悬停填充表格,鼠标移到表格上时，鼠标所在行放大高亮显示【实例】...
本文给大家介绍一个比较有趣的CSS Table表格,当鼠标移到表格上时,鼠标所在行放大高亮显示. 鼠标所在行放大高亮显示 HTML代码html> Table V01 * { margin: 0p ...
在Openstack上部署compute节点上时，开启服务openstack-nova-compute.service无法启动的解决方法
在Openstack上部署compute节点上时,开启服务openstack-nova-compute.service无法启动的解决方法参考文章: (1)在Openstack上部署compute节点 ...
html 图片鼠标移上去点亮,CSS3 实现鼠标移到图片上时一片亮光一闪而过的效果...
01 效果描述 CSS3 实现鼠标移到图片上时一片亮光一闪而过的效果 02 效果图摘 03 关键代码 html: CSS: .hover14{ width:500px; float:left; } . ...
web前端中——this指向以及this的应用，函数的调用——this代码举例说明——举例：当鼠标划到列表上时，出现div内容，当鼠标移开列表时，div隐藏
一: //this:这个 //想要知道this代表着什么可以直接在中输入alert(this); //由此可以看出window是JS中的"老大" eg:alert(1);其实就是w ...
html点击文字展开图片,DIV CSS鼠标经过悬停在图片上时图片上方显示文字
DIV CSS鼠标悬停在没有文字内容图片上时图片上方显示文字,完全是纯css div实现.CSS实现鼠标悬停放图片上方时显示美化内容. 原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背景 ...
鼠标悬停在一个标签上时，显示一段文字
1.使用title属性 <div title="显示文字"><p>显示</p> </div> 2.使用监听鼠标事件onmouseov ...
鼠标移动到函数上时显示注释 c++_《30天自制操作系统》 05-08部分从字符显示到中断处理...
1. 文字鼠标显示 a. 定义BOOTINFO结构体这个结构体包含操作系统的基础信息结构体声明如下: struct BOOTINFO {char cyls, leds, vmode, reserv ...

echarts修改鼠标悬停在节点上时显示的内容，自定义鼠标悬停显示内容

echarts修改鼠标悬停在节点上时显示的内容，自定义鼠标悬停显示内容相关推荐

最新文章

热门文章