业务提的新需求需要在tooltip里面添加点击事件。
我之前的写法是这样的
trigger: "item", // 语句的作用可以看我上一篇文章
triggerOn: "click",
alwaysShowContent: true,
enterable: true,
formatter: function (params, citys) {
if (params.name == "安阳市") {
let nihao = "河南省 " + params.name;
for (let a = 0; a < data.安阳.length; a++) {
nihao += "<p style='text-align:left'>" + data.安阳[a] + "</p>";
}
nihao +="<p style='text-align:right' onclick="leftslide() ">查看</p>"
return nihao;
} else if (params.name == "鹤壁市") {
...
}
})
虽然语句的作用生效了，但是却不是通过我点击查看的时候提示的。而是直接点击地图的每个地市之后，直接触发
了这个点击时间。
我想着会不会是冒泡，所以我在事件里面进行了阻止事件冒泡的操作，但是没有起作用。
我通过在浏览器的Elements检查中发现，查看这个标签虽然绑定了点击事件，但是这个事件一直是undefined。
于是我直接开始搜：echarts的tooltip添加点击事件 ，找到一个可以用的，这是原创作者的链接：
https://blog.csdn.net/bulabulahei/article/details/118668146
这是我改动后的
function leftslide() {
alert(123);
}
window.leftslide = leftslide;
trigger: "item", // 语句的作用可以看我上一篇文章
triggerOn: "click",
alwaysShowContent: true,
enterable: true,
formatter: function (params, citys) {
if (params.name == "安阳市") {
let nihao = "河南省 " + params.name;
for (let a = 0; a < data.安阳.length; a++) {
nihao += "<p style='text-align:left'>" + data.安阳[a] + "</p>";
}
return `${zaijian}<p style='text-align:right' onclick="leftslide() ">查看</p>`
} else if (params.name == "鹤壁市") {
...
}
})
两点区别：
1.点击事件注册为window事件
2.拼接用末班字符串
以上就是echarts的tooltip添加点击事件的方法了
如果这篇文章对你有帮助，或者在进行中遇到其他问题，欢迎评论区留言出来。
我们一起探讨~
