Echarts手动关闭tooltip/滑动或滚动时隐藏tooltip:

1.tooltip里面的配置
tooltip: {
   show: true, //是否显示提示框组件,包括提示框浮层和 axisPointer。
   trigger: 'item', //触发类型。item,axis,none
   enterable: true,//鼠标是否可进入提示框浮层中,默认为false,
   showContent: true,          //是否显示提示框浮层
   triggerOn: 'click',//提示框触发的条件(mousemove|click|none)  
   showDelay: 0,   //浮层显示的延迟,单位为 ms,默认没有延迟,也不建议设置。在 triggerOn 为 'mousemove' 时有效。
   textStyle: {
       color: 'white',
       fontSize: 12
   },
   padding: [0, 8],
   hideDelay: 10,             //浮层隐藏的延迟
   formatter: (i) => (i.data) ? `<div class="map-tooltip">
       <h3>${i.data.title}</h3>
       <i class="map-tooltip-close" οnclick="toolTipClose(this)">X</i>
       </div>` : `` ,//有数据,就显示关闭按钮(拼接)
   backgroundColor: 'none',  //提示框浮层的背景颜色。
   borderColor: "white",  //图形的描边颜色
   borderWidth: 0,
   alwaysShowContent: true,
   transitionDuration: 1,      //提示框浮层的移动动画过渡时间,单位是 s,设置为 0 的时候会紧跟着鼠标移动。
},
2.解决:
1.triggerOn需要设置为click触发
2.enterable设置为true ,鼠标可以进入悬浮框内
window.toolTipClose = this.toolTipClose   //在formatter中给元素绑定点击事件,点击事件需要先在window上挂载

toolTipClose(e){
  e.parentNode.style.display = 'none'   //找到该元素父元素,设置display为none即可实现手动关闭
},
3.滑动或滚动时隐藏tooltip
 triggerOn: 'click',//提示框触发的条件(mousemove|click|none)  
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Sun Peng

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值