Echarts 地图(map)插件之 鼠标HOVER和tooltip自定义提示框

本文介绍如何使用ECharts实现鼠标悬停触发事件,并自定义提示框的内容,包括通过函数自定义提示框的数据及模板,适用于地图等交互场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

【自行修改 "引号"】

一、鼠标HOVER时的事件:

参照官方文档解释,

  技术分享

可以看出这款插件有丰富的鼠标事件可供选择:

  调用鼠标HOVER事件的方法很简单,只需把以下代码放到charts()调用的函数的最底部即可

  

 var ecConfig = require(‘echarts/config‘);
     myChart.on(ecConfig.EVENT.HOVER, function (param){
         var selected = param.name;
         //write your code here
         //console.log(selected);打印参数
         //hoverin();调用自定义函数
         //document.getElementById(‘wrong-message‘).innerHTML = str;
     });

二、tooltip的数据自定义;

  这块研究了一段时间,都是浅浅的研究,

  tooltip就是鼠标放在地图上显示的提示,如图红框里的就是tooltip的内容;

技术分享

这里总结的主要是这块数据的自定义;

官方文档介绍说需要修改formatter;

option = {
    tooltip : {
        trigger: ‘item‘,
        formatter: ‘{b}‘
    }
},

文档中说明:formatter支持函数自定义数据及模板

技术分享

那么,我们可以把上面的代码改造一下:

首先自定义一些数据:(例子)这里是图片的url

var $imgs = [
        {area: ‘北京‘, url:‘http://www.blingschool.com/template/33/pc/images//logo2.png‘},
        {area: ‘天津‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
        {area: ‘上海‘, url:‘http://www.blingschool.com/template/33/pc/images//logo2.png‘},
        {area: ‘重庆‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
        {area: ‘河北‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
        {area: ‘河南‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
        {area: ‘云南‘, url:‘http://www.blingschool.com/template/33/pc/images//logo2.png‘},
        {area: ‘辽宁‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
        {area: ‘黑龙江‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
        {area: ‘湖南‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
        {area: ‘安徽‘, url:‘http://www.blingschool.com/template/33/pc/images//logo2.png‘},
        {area: ‘山东‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
        {area: ‘新疆‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
        {area: ‘江苏‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
        {area: ‘浙江‘, url:‘http://www.blingschool.com/template/33/pc/images//logo2.png‘},
        {area: ‘江西‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
        {area: ‘湖北‘, url:‘http://www.blingschool.com/template/33/pc/images//logo2.png‘},
        {area: ‘广西‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
        {area: ‘甘肃‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
        {area: ‘山西‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
        {area: ‘内蒙古‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
        {area: ‘陕西‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
        {area: ‘吉林‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
        {area: ‘福建‘, url:‘http://www.blingschool.com/template/33/pc/images//logo2.png‘},
        {area: ‘贵州‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
        {area: ‘广东‘, url:‘http://www.blingschool.com/template/33/pc/images//logo2.png‘},
        {area: ‘青海‘, url:‘http://www.blingschool.com/template/33/pc/images//logo2.png‘},
        {area: ‘西藏‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
        {area: ‘四川‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
        {area: ‘宁夏‘, url:‘http://www.blingschool.com/template/33/pc/images//logo2.png‘},
        {area: ‘海南‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
        {area: ‘台湾‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
        {area: ‘香港‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
        {area: ‘澳门‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘}
    ];

当鼠标HOVER的时候,去判断取哪些值来显示;

tooltip : {
            trigger: ‘item‘,
            formatter: function (params,ticket,callback){
                var $pna = params.name;
                var res = ‘‘;
                
                for(var i = 0;i<$imgs.length;i++){
                    if($imgs[i].area == $pna){
                        res = ‘<img src="‘+ $imgs[i].url +‘" />‘;//设置自定义数据的模板,这里的模板是图片
                        //console.log(res);
                        break;
                    }
                }
                
                setTimeout(function (){
                    // 仅为了模拟异步回调
                    callback(ticket, res);//回调函数,这里可以做异步请求加载的一些代码
                }, 1000)
                return ‘loading‘;
            }
        }

 

最终完成的效果如图

技术分享

转载于:https://www.cnblogs.com/beiz/p/5251537.html

<think>嗯,用户提到在使用 ECharts 时,tooltip 导致地图的高亮效果消失。我需要仔细分析这个问题。首先,用户可能是在地图上设置了某个区域的高亮效果,比如鼠标悬停时区域颜色变化,但添加了 tooltip 后,这个高亮效果不见了。 首先,我应该回忆一下 ECharts地图的高亮机制。通常,地图系列(series-map)的高亮是通过 emphasis 状态来控制的,比如设置 itemStyle label 在 emphasis 下的样式。而 tooltip 是全局的提示框组件,可能会影响元素的交互状态。 可能的原因之一是 tooltip 的触发方式(trigger)设置问题。如果 tooltip 的 trigger 设置为 'item',它可能会拦截鼠标事件,导致地图元素的 mouseover 事件没有被正确触发,进而使得 emphasis 状态无法应用。这时候,检查 tooltip.trigger 的配置是否正确。 另一个可能性是 tooltip 地图系列的 emphasis 状态的样式冲突。比如,当 tooltip 显示时,ECharts 可能会自动清除其他元素的强调状态。这时候需要确认是否有配置可以保持高亮状态,比如设置 tooltip.enterable 为 true 允许鼠标进入 tooltip,避免状态丢失。 另外,用户可能没有正确配置地图系列的 emphasis 样式,或者 tooltip 的事件影响了高亮显示。需要检查 series-map 中的 emphasis 配置项是否完整,比如 itemStyle.emphasis 的颜色是否设置正确。 解决方案方面,首先建议用户检查 tooltip 的 trigger 配置,如果是 'item',可能需要结合其他配置。其次,设置 tooltip.enterable 为 true 可能有助于保持高亮。此外,确保地图系列的 emphasis 样式正确应用,并且没有其他全局配置覆盖了高亮效果。 还可以考虑使用 tooltip 的 formatter 函数,在显示 tooltip 时手动触发高亮,但这可能需要更复杂的交互处理。另外,检查 ECharts 的版本是否存在已知的 bug,并建议用户升级到最新版本。 最后,可能需要提供一个代码示例,展示如何正确配置 tooltip emphasis 以确保高亮效果不被覆盖。例如,在 option 中同时设置 tooltip 的 enterable series-map 的 emphasis 样式,确保两者协同工作。</think>在 ECharts 中,当使用地图map)图表时,如果发现 tooltip 导致地图区域的高亮(hover 高亮)效果消失,这通常是由于 **事件冒泡冲突** 或 **配置优先级问题** 导致的。以下是逐步分析解决方案: --- ### 一、问题原因分析 1. **事件冒泡机制** EChartstooltip 默认会监听鼠标事件(如 `mousemove`)。当 tooltip 触发时,可能会覆盖地图元素的 `emphasis`(悬停高亮)状态,导致高亮效果被强制清除。 2. **配置优先级问题** - 地图区域的 `emphasis` 高亮效果由 `series-map.itemStyle.emphasis` 控制。 - 如果 tooltip 的 `trigger` 设置为 `'item'`(默认值),tooltip 的触发会直接绑定到地图区域,可能中断高亮状态的持续。 --- ### 二、解决方案 #### 方法 1:调整 tooltip 的触发方式 通过设置 `tooltip.enterable: true`,允许鼠标进入 tooltip 区域,避免中断高亮状态: ```javascript option = { tooltip: { trigger: 'item', enterable: true, // 关键配置:允许鼠标进入 tooltip }, series: [{ type: 'map', map: 'china', itemStyle: { emphasis: { areaColor: 'red', // 悬停时的高亮颜色 } } }] }; ``` #### 方法 2:手动控制高亮状态 通过监听事件,在 tooltip 显示时强制保持高亮: ```javascript myChart.on('showTip', function(params) { // 获取当前高亮的区域名称 const name = params.data.name; // 手动触发高亮 myChart.dispatchAction({ type: 'highlight', name: name }); }); ``` #### 方法 3:检查地图层与 tooltip 的层级关系 确保 tooltip 的 `z` 层级不会覆盖地图: ```javascript tooltip: { z: 1, // 设置较低的层级(默认是更高的值) }, series: [{ type: 'map', z: 2, // 地图层级更高 }] ``` --- ### 三、完整配置示例 ```javascript option = { tooltip: { trigger: 'item', enterable: true, formatter: '{b}:{c}' }, series: [{ type: 'map', map: 'china', roam: true, itemStyle: { normal: { areaColor: '#f5f5f5', borderColor: '#999' }, emphasis: { areaColor: 'red', // 悬停高亮颜色 borderWidth: 2 } } }] }; ``` --- ### 四、注意事项 1. **ECharts 版本兼容性** 如果问题持续,请升级到最新版 ECharts([官网下载](https://echarts.apache.org/zh/download.html))。 2. **浏览器控制台调试** 打开浏览器开发者工具,检查是否有 JavaScript 错误或警告。 3. **简化复现步骤** 在 [ECharts 官方示例编辑器](https://echarts.apache.org/examples/zh/editor.html) 中复现问题,确认是否为配置问题。 --- 通过上述方法,应该能有效解决 tooltip 导致地图高亮消失的问题。如果仍有异常,建议提供最小化复现代码片段以便进一步排查。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值