天天看點

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)  
           

繼續閱讀