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)