echarts 給 提示框（tooltip）添加點擊事件（點擊顯示彈出窗）

需求描述：

如圖所示，希望達到如下效果：點擊 圖1（echarts繪制的地圖）中的圖標，展示圖1的文字提示框，再點擊提示框展示詳情頁面（圖2的彈出窗）

用到的技術：vue + element-ui + echarts

 

代碼展示：

高亮顯示的部分都是重要部分，在注意事項中也都有說明。

let option = {
  tooltip: {
    show: true,
    trigger: 'item',
    triggerOn: 'click',
    enterable: true,
    extraCssText: 'z-index: 99;max-width: 100px;white-space:pre-wrap',
    formatter: function(params) {
      const result = params.data
      return `<div onclick="myDialog('${result.title}')">${result.name}</div>`
    }
  }
}

mounted：

mounted() {
  const _this = this
  window.myDialog= function(title) {
    // 寫你的邏輯 我這里該頁面以子組件存在父組件中，觸發的父組件中的一個方法 該方法里寫的展示彈窗的相關邏輯
    _this.$emit('showDetail', title)
  }
}

父組件中方法：

showDetail(title) {
  this.dialogVisible = true
  // 其他邏輯
}

注意事項：

1. triggerOn 一定要改為 “click”。默認值是下面兩個，只觸發則設置哪個都可以，也可以不設置此項，但是鼠標移走的話，這個提示框就消失了，所以改成 “click”， 鼠標移走不會消失

查看官方完整解釋請點擊

 2. enterable 要設置為 true，才能使鼠標進入提示框，才可以為提示框添加點擊事件。

 3. myDialog 方法傳參的時候一定要加上引號， '${result.title}' ，否則會報錯。

 根據錯誤提示信息來看，是缺少括號引起的。但是這里是因為向函數傳入字符串沒有加‘’單引號導致的報錯。

4. 在 formatter 中添加 內聯的點擊事件，點擊事件需要掛載在 window 上，否則獲取不到。所以這里要用 window.myDialog。

5. 彈出窗展示后，提示框會展示在彈窗上面（如下圖所示），查看提示框的 z-index 為 9999999 ，我們可以設置彈窗的層級大於這個數值，也可以通過設置 extraCssText 來修改提示框的 z-index 樣式。

extraCssText: 'z-index: 99;max-width: 500px;white-space:pre-wrap', // max-width 和 white-space是設置超出換行的

 

上述代碼完成后，就會達到想要的效果了。