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)