echarts世界地图组件轮播、鼠标移入移出事件
【问题】:地图在轮播的时候toolTips的位置显示不正确
【原因】:出现问题的是美国、法国,发现原来在地图上还有很小很小很小的位置,比较难发现
【解决】:翻文档发现,position使用回调函数的形式,return它的坐标即可,总结,出现问题优先翻阅文档
export const activeGraphics = (option, myChartName) => {let currentIndex = -1;window.clearInterval(window.labelTime);window.labelTime = window.setInterval(function () {var dataLen = option.series[0].data.length;// 取消之前高亮的图形myChartName.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex: currentIndex,});currentIndex = (currentIndex + 1) % dataLen;// 高亮当前图形myChartName.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: currentIndex,});// 显示 tooltipmyChartName.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: currentIndex,position: (point, params, dom, rect, size) => {return point;},});}, 1500);//TIPS:position回调let beforeActive = '';myChartName.on('mousemove', e => {window.clearInterval(window.labelTime); //清除循环beforeActive = e.dataIndex;myChartName.dispatchAction({type: 'downplay',seriesIndex: 0,});myChartName.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: e.dataIndex,});myChartName.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: e.dataIndex,position: ({ pos }) => {return pos;},});});myChartName.on('mouseout', () => {let currentIndex = -1;window.clearInterval(window.labelTime);window.labelTime = window.setInterval(function () {var dataLen = option.series[0].data.length;// 取消之前高亮的图形if (beforeActive) {myChartName.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex: beforeActive,});}myChartName.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex: currentIndex,});currentIndex = (currentIndex + 1) % dataLen;myChartName.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: currentIndex,});myChartName.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: currentIndex,position: (point, params, dom, rect, size) => {return point;},});}, 1500);});
};
echarts世界地图组件轮播、鼠标移入移出事件相关推荐
- js(jquery)鼠标移入移出事件时,出现闪烁、隐藏显示隐藏显示不停切换的情况
<script> $(".guanzhu").hover(function(){$(".weixinTop").show();},function( ...
- vue按钮移上去显示提示_vue 鼠标移入移出事件(移入出现按钮),element-ui表格移入移出...
效果图: 注:@mouseenter="enter(index)" @mouseleave="leave()" 重点 下载 删除 data() { retu ...
- html鼠标移入移除事件,js鼠标移入移出事件样例
javaScript实例 li{background-color:#eee;height:25px;margin-top:2px;} //添加鼠标移入移出事件 function fun(){ //获取 ...
- jq鼠标移入移出显示和隐藏_jQuery实现鼠标移入移出事件切换功能示例
这篇文章主要介绍了jQuery实现鼠标移入移出事件切换功能,结合实例形式分析了jQuery不同版本处理鼠标事件响应与触发相关操作技巧,需要的朋友可以参考下. jQuery实现鼠标移入移出事件切换功能 ...
- 鼠标移入移出事件,mouseover、mouseenter区别
简单介绍: js中有两组鼠标移入移出事件:(旧的)mouseover.mouseout与(新的)mouseenter.mouseleave,不建议混着使用. 两者的区别是,新的鼠标移入移出事件,去掉了 ...
- web前端开发第二阶段——鼠标移入移出事件
鼠标移入/移出事件 : 鼠标移入 :onmouseenter 鼠标移出 : onmouseleave <!DOCTYPE html> <html> <head>&l ...
- JavaScript事件委托之鼠标移入移出事件
鼠标移入移出事件 <div class="parent">父元素<div class="child">子元素</div>&l ...
- vue中鼠标移入移出事件种类以及区别
1.@mouseover与@mouseout 鼠标经过时自身触发事件,其子元素同时也触发该事件. 父亲有的东西,儿子也有 ,支持冒泡. 适用于鼠标移入移出时子元素也会执行事件的场景,或者单一标签. 2 ...
- vue鼠标移入移出事件注意事项
发生冒泡事件 今天在写一个鼠标的移入移出的事件,使用mouseout和mouseover期间,踩了一个大坑,经过半天的排查,终于发现是发生了冒泡事件. 把mouseout和mouseover绑在父元素 ...
最新文章
- 你不得不知道的Visual Studio 2012(1)- 每日必用功能
- linux 环境 下面 yum 安装nginx
- 网卡绑定技术linux c,Linux多网卡绑定
- .NET Framework开源详细配置
- jboss4。0下mysql数据源的配置
- jacky解读麻省理工《计算机科学与Python编程导论》第1集
- 均胜群英:PC+移动端数字化管理,两年降本7%,人均产值提高300%
- JEECG v3.0.beta发布,基于代码生成器的智能开发平台
- [转载]Qt之获取本机网络信息_vortex_新浪博客
- 读jQuery源码释疑笔记3
- 认认真真推荐几个ATM大神的公众号
- php entity,PHP html_entity_decode() 函数_程序员人生
- [译]GLUT教程 - 整合代码2
- 73种网页常用js代码
- 无毒健康软件下载地址 http://www.downcc.com/ 绿色资源网
- JavaScript嗅探执行神器-sniffer.js,你值得拥有!
- html在线随机出题系统,出题系统/考试模拟考试系统-在线系统
- 北京政协:电子垃圾回收是亟待破解的难题
- python tenacity用装饰器方式重试用例,提高测试用例的健壮性
- 数据库三范式设计习题
热门文章
- html5 手机拍视频滤镜,还在用滤镜拍视频?这家手机支持一键视频美颜,效果不要太赞...
- Federated Averaging算法
- 【数字图像处理4】小波变换 处理图像
- C++:判断链表是否有环
- 计算机博士复试英语自我介绍,考博复试英语自我介绍范文【三篇】
- ORA-12520: TNS:监听程序无法为请求的服务器类型找到可用的处理程序
- 查询amazon ec2费用
- c mysql maxpoolsize_记一次 druid maxPoolSize(maxActive) 配置引起的线上事故
- VIBRO-METER VM600 IRC4 可在螺丝端子连接器上获得
- 游戏任务系统的设计要素