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

最新推荐文章于 2024-05-11 10:29:34 发布
最新推荐文章于 2024-05-11 10:29:34 发布
阅读量1w 收藏 37
点赞数 4
分类专栏： echarts 文章标签： echarts echarts鼠标悬停 echarts自定义鼠标悬停 echarts节点鼠标悬停
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36509946/article/details/108239830
版权

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

效果图

代码部分：

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>

 

笑到世界都狼狈
关注
  • 4
    点赞
  • 踩
  • 37
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echarts鼠标悬停图表时自定义显示内容
时光-拾荒
08-22 1万+
Echarts鼠标悬停图表时自定义显示内容 Echarts实现了数据的可视化，对于鼠标悬浮式显示的内容由tooltip中的formatter控制。 前端页面，引入js文件 <script src="/interface/yaxiang/js/echarts/echarts.min.js"></script> <div id="chartdiv" style="widt...
echarts关系图graph修改图片，自定义鼠标节点和线悬停，图片下载，拖拽，右键弹框等功能的实现
笑到世界都狼狈的博客
09-04 9882
1.首先看一下效果图： 2.代码目录结构 3.参考地址：https://gallery.echartsjs.com/editor.html?c=xCLEj67T3H 4.代码部分：（如果不懂，可以看我之前写的关于echarts树图tree部分的代码，步骤都比较清楚，所以这边我直接上全部代码了，就不拆分解释说明了） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8".
【echarts】解决ECharts鼠标悬停（mouseover）事件触发范围问题
最新发布
九日的博客
05-11 1394
对于更加复杂的需求，例如在不增大实际图形大小的前提下增加触发区域，可以通过在ECharts中添加透明的辅助图形（如透明的柱状图或圆形）来扩大mouseover触发范围。option = {series: [type: 'line', // 实际显示的线图...},type: 'scatter', // 用于扩大触发区域的散点图opacity: 0 // 透明显示如果标准的图表配置不足以满足需求，可以通过编写自定义的事件监听逻辑来进一步优化用户体验。通过监听mousemove。
echart 自定义鼠标悬停toolTip
磨磨叽叽季
03-18 992
在option的tooltip属性中自定义 tooltip: { trigger: 'axis', axisPointer: {type: 'shadow'}, //数据格式 formatter: function (params) { if(params[0].data == 0||params[1].data == 0){ var display = params[0].axisValue + '<br>计划产值：' + params[0
Echarts鼠标悬浮显示数据详细介绍
azhe5201314的专栏
08-30 1万+
Echarts鼠标悬浮显示数据
echarts 自定义鼠标悬停展示
M的博客
06-06 3861
echarts自定义鼠标悬停展示
自定义echarts鼠标悬浮显示的内容
xixi的博客
09-01 8629
主要是在tooltip添加 formatter: function (params) { // console.log(params); // 当我们想要自定义提示框内容时，可以先将鼠标悬浮的数据打印出来，然后根据需求提取出来即可 let firstParams = params[0]; let Paramsss = params[1]; return firstParams.name + ' ' + firstParams.seriesNa
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
08-27
然而，在实际使用echarts时，开发者可能会遇到一些问题，例如如何在节点上显示动态数据、如何添加提示文本等。下面将对这两个问题进行详细的解释和解决。 问题一：echarts如何在节点上显示动态数据 在echarts中，...
Echarts 地图+散点图结合 +闪点+轮播
12-18
在ECharts中，可以通过设置动画效果实现这一目的，比如让某些数据点在加载时闪烁，或者当鼠标悬停在特定点上时闪烁。这可以增强数据的视觉吸引力，提高用户的交互体验。 4. **轮播功能**： 轮播（Carousel）是将多...
Echarts 关系图
01-04
当鼠标悬停在节点上时，ECharts 可以自动高亮相关联的边和节点，帮助用户快速识别和追踪数据间的路径。 提示框提示是另一个增强用户体验的功能。当鼠标移动到节点或边时，ECharts 可以显示一个包含详细信息的提示框...
echarts人物关系图
12-04
7. **emphasis:** 用于设置鼠标悬停时的高亮效果，可以设置节点和边的样式变化。 8. **animation:** 控制动画效果，包括是否开启动画和动画的配置。 **三、实例代码** ```javascript var option = { tooltip: {}...
echarts 使用formatter 修改鼠标悬浮事件信息操作
11-20
formatter 一般用于格式化鼠标悬浮时间的信息，如果你的数据是JSON数组格式，那么不必和我这样一一判断扇形图的 ticket 值，使用 formatter 的 callback 时间即可自行对应 formatter: function (params, ticket, callback) { console.log(params); console.log(ticket); var str = '明细：'; if(ticket == 'item_操作概况_0'){ for(var i in data.mustMod){
echarts-2.0.0.rar
07-21
- **高度可定制化**：ECharts允许开发者自定义图表样式，包括颜色、大小、形状等，以及交互行为，如鼠标悬停、点击事件等，实现个性化的设计。 - **交互性**：ECharts提供图表之间的联动，以及图表与用户之间的...
【ECharts系列】ECharts 鼠标悬停线格式化
西门吹雪
07-07 1万+
在这个回调函数中，依然将时间戳转换为Date对象，然后使用getHours()、getMinutes()和getSeconds()方法获取时分秒数值，最后使用字符串拼接的方式将它们组合成"时:分:秒"的字符串格式。通过类似以上示例代码的方式，可以将ECharts折线图的X轴时间戳格式化为任意指定的时间格式，并在鼠标悬停时显示友好的引导线，同时引导线上的数据值也被格式化为指定的时间格式。折线图有很多数据，鼠标悬停时，针对X轴，Y轴数据进行格式化，例如X的时间戳，格式化为时分秒，Y轴保留两位小时。
echarts图表鼠标悬浮显示数据
清水的专栏
07-08 1万+
echarts图表鼠标悬浮显示数据
echarts的地图热力点标注鼠标悬停显示提示内容
Zxiuping的博客
04-04 1万+
在做中国地图上面的热力点标注的时候遇到提示格式不是我想要的的问题，后来做了更改就可以了。 首先贴出我请求回来数据格式 list: [{latitude: "22.522910", longitude: "114.054540", num: "3", zone1: "A", province: "广东"} 0: {latitude: "22.522910", longitude: "114.0...
echarts自定义鼠标悬浮显示效果
热门推荐
程序员小咖的博客
08-17 8万+
最近在做报表系统，用到了大量的图表显示效果，下面总结一下我使用过程中遇到的问题及解决办法。本教程主要讲解了：鼠标悬浮时自定义显示效果、Y轴显示金额柱状图上面显示百分比、修改X、Y轴坐标颜色、两个Y轴实现水平线一致。（我描述的可能不好，请看图来理解）点击进入echarts官方网址demo将下面的代码直接复制粘贴即可1.鼠标悬浮时自定义显示效果、修改X、Y轴坐标颜色 var brokenName =
echart 自定义小圆点提示数据（和官网一样的效果）
cc蒲公英的博客
11-10 892
echart 自定义小圆点提示数据（和官网一样的效果
vue+echarts中国地图鼠标悬停自定义弹窗样式（tooltip）
qq_32166301的博客
06-21 2136
【代码】vue+echarts中国地图鼠标悬停自定义弹窗样式（tooltip）
echarts鼠标悬停显示
07-25
您好！关于ECharts鼠标悬停显示的问题，您可以通过ECharts提供的tooltip组件来实现。 首先，需要在ECharts的option配置中定义tooltip组件。可以将tooltip组件配置在series中，例如： ```javascript option = { tooltip: { trigger: 'axis', // 设置触发类型，这里以鼠标悬停在坐标轴上时触发 axisPointer: { // 坐标轴指示器 type: 'shadow' // 设置指示器类型为阴影 } }, // 其他配置项... series: [ // 具体的数据系列配置... ] }; ``` 然后，您可以在series的data项中指定需要显示的数据，并在该数据项中添加tooltip属性。例如： ```javascript series: [{ data: [ { value: 123, tooltip: '这是提示内容1' }, { value: 456, tooltip: '这是提示内容2' }, // 其他数据项... ], type: 'bar' // 这里以柱状图为例 }] ``` 这样，在鼠标悬停在柱状图上时，会显示相应的提示内容。 希望对您有所帮助！如果还有其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值