echarts点击地图标记点触发弹窗事件
需求：
上次写了⼀篇是给提⽰框添加点击事件，不料需求有变，要求（还是在 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')
('click', function(params) {
// 判断点击对象为当前标记点时触发 myDialog 事件
setoption
if (params.seriesType === 'scatter') {
_Dialog(params.data.title)
}
})
this.charts.setOption(option, true)
myDialog(title) {
this.$emit('showDetail', title)
}
⽗组件中⽅法：
showDetail(title) {
// 展⽰弹窗
this.dialogVisible = true
// 其他逻辑
}
打印点击事件中的 params（上述代码⾼亮背景处，分别打印了点击标记点和点击其他地图区域的展⽰情况，各位有需求可以⾃⾏打印看的更清晰）：