echarts 點擊地圖標記點觸發彈窗事件

需求：

上次寫了一篇 echarts 給 提示框（tooltip）添加點擊事件（點擊顯示彈出窗） 是給提示框添加點擊事件，不料需求有變，要求（還是在 echarts 繪制的地圖上）：

1. 鼠標移動到 標記點 上時，顯示提示框內容

2. 點擊 標記點 ，直接彈出彈窗展示標記點詳情內容

解決：

JS（Vue）子組件：

let option = {
　// 解決需求1 默認即為鼠標懸浮展示
  tooltip: {
    show: true,
    trigger: 'item',
    // 使 提示框層級位於彈窗下、文字超出換行展示
    extraCssText: 'z-index: 99;max-width: 500px;white-space:pre-wrap',
    // {b} 為 series 中 data 的 name 值
    formatter: '{b}'
  }
}
// 解決需求2 const _this = this
// this.charts 為 echarts 實例。解決事件冒泡（點擊觸發兩次事件）的問題
this.charts.off('click')
this.charts.on('click', function(params) {
  // 判斷點擊對象為當前 標記點 時觸發 myDialog 事件
  if (params.seriesType === 'scatter') {
    _this.myDialog(params.data.title)
  }
})
this.charts.setOption(option, true)

myDialog(title) {
  this.$emit('showDetail', title)
}

父組件中方法：

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

打印點擊事件中的 params（上述代碼高亮背景處，分別打印了點擊標記點和點擊其他地圖區域的展示情況，各位有需求可以自行打印看的更清晰）：