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
// 写你的逻辑我这⾥该页⾯以⼦组件存在⽗组件中，触发的⽗组件中的⼀个⽅法该⽅法⾥写的展⽰弹窗的相关逻辑
_this.$emit('showDetail', title)
}
}
⽗组件中⽅法：
showDetail(title) {
this.dialogVisible = true
// 其他逻辑
}
注意事项：
1. triggerOn ⼀定要改为 “click”。默认值是下⾯两个，只触发则设置哪个都可以，也可以不设置此项，但是⿏标移⾛的话，这个提⽰框就消失了，所以改成 “click”，⿏标移⾛不会消失
2. enterable 要设置为 true，才能使⿏标进⼊提⽰框，才可以为提⽰框添加点击事件。
3. myDialog ⽅法传参的时候⼀定要加上引号， '${result.title}' ，否则会报错。
根据错误提⽰信息来看，是缺少括号引起的。但是这⾥是因为向函数传⼊字符串没有加‘’单引号导致的报错。
4. 在 formatter 中添加内联的点击事件，点击事件需要挂载在 window 上，否则获取不到。所以这⾥要⽤ Dialog。
5. 弹出窗展⽰后，提⽰框会展⽰在弹窗上⾯（如下图所⽰），查看提⽰框的 z-index 为 9999999 ，我们可以设置弹窗的层级⼤于这个数值，也可以通过设置 extraCssText 来修改提⽰框的 z-index 样式。
自动弹窗代码extraCssText: 'z-index: 99;max-width: 500px;white-space:pre-wrap', // max-width 和 white-space是设置超出换⾏的
上述代码完成后，就会达到想要的效果了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。