Vue在echarts tooltip中添加点击事件案例详解
更新时间：2021年11月23日 15:59:32 作者：静水思流
本文主要介绍了Vue项目中在echarts tooltip添加点击事件的案例详解，代码具有一定的价值，感兴趣的小伙伴可以来学习一下
需求
需要在echarts tooltip点击学校的名称，跳转到详情页面；项目是从上海市---> 某个区----> 具体的学校（在最后一级的tooltip中绑定一个点击事件）
项目是用vue和echarts实现的，echarts是新版本（^5.0.2），并不能把点击事件绑定在window上
解决方法
1、设置tooltip
enterable: true, //允许鼠标进入提示悬浮层中，triggeron:'click',//提示框触发的条件 mousemove鼠标移动时触发 click鼠标点击时触发 'mousemove|click'同时鼠标移动和点击时触发
tooltip: {
// 提示框组件
show: true, // 显示提示框组件
trigger: "item", // 触发类型
triggerOn: "mousemove", // 出发条件
// formatter: "名称:{b}<br/>坐标:{c}",
enterable: true, //允许鼠标进入提示悬浮层中
showContent: true,
triggerOn: "click", //提示框触发的条件 mousemove鼠标移动时触发 click鼠标点击时触发 'mousemove|click'同时鼠标移动和点击时触发
// confine: true, //把toolTip限制在图表的区域内
className: "areaTool",
// hideDelay: 100000, //延时消失时间
formatter: (item) => {
this.hookToolTip = item;
// 经纬度太长需要对位数进行截取显示，保留七位小数
// 需要绑定点击事件
var tipHtml = "";
tipHtml =
'<div style="width:2.5rem;height:80%;background:rgba(22,80,158,0.8);border:0.0125rem solid rgba(7,166,255,0.7)">' +
'<div style="width:100%;height:0.375rem;line-height:0.375rem;border-bottom:0.025rem solid rgba(7,166,255,0.7);">' +
'<i style="display:inline-block;width:0.125rem;height:0.125rem;background:#16d6ff;border-radius:0.5rem;">' +
"</i>" +
'<span id="btn-tooltip" style="margin-left:0.125rem;color:#fff;font-size:0.2rem;cursor:pointer">' +
item.name +
"</span>" +
"</div>" +
'<div style="padding:0.1875rem;text-align: left;">' +
'<p style="color:#fff;font-size:0.15rem;">' +
'<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
"</i>" +
"经度" +
'<span style="color:#11ee7d;margin:0 0.075rem;">' +
item.value[0].substr(0, 11) +
"</span>" +
"</p>" +
'<p style="color:#fff;font-size:0.15rem;">' +
'<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
"</i>" +
"纬度" +
'<span style="color:#11ee7d;margin:0 0.075rem;">' +
item.value[1].substr(0, 11) +
"</span>" +
"</p>" +
'<p style="color:#fff;font-size:0.15rem;">' +
'<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
"</i>" +
"考场数" +
'<span style="color:#11ee7d;margin:0 0.075rem;">' +
item.componentIndex +
"</span>" +
"个" +
"</p>" +
'<p style="color:#fff;font-size:0.15rem;">' +
'<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
"</i>" +
"监考教师" +
'<span style="color:#11ee7d;margin:0 0.075rem;">' +
item.componentIndex +
"</span>" +
"个" +
"</p>";
return tipHtml;
},
},
2、定义hookToolTip变量
在formatter中给hookToolTip赋值，添加一个id，然后通过watch去检测dom元素，可以通过onclick去绑定事件，也可以通过addEventListerner去注册事件
watch: {
hookToolTip: {
handler(newVal, oldVal) {
console.log(newVal, oldVal, "---------watch");
let tooltipButton = document.querySelectorAll("#btn-tooltip");
//通过onclick注册事件 querySelectorAll获取的元素是一个数组
if (tooltipButton.length > 0) {
tooltipButton[0].onclick = this.pointNameClick;
}
// 通过addEventListener注册事件
for (let i = 0; i < tooltipButton.length; i++) {
tooltipButton[i].addEventListener("click", this.chartClick);
}
},
// immediate: true,
// deep: true,
},
},
3、在methods中添加方法
4、完整代码
data(){
hookToolTip: {},
},
watch: {
hookToolTip: {
handler(newVal, oldVal) {
console.log(newVal, oldVal, "---------watch");
let tooltipButton = document.querySelectorAll("#btn-tooltip");
//通过onclick注册事件 querySelectorAll获取的元素是一个数组
if (tooltipButton.length > 0) {
tooltipButton[0].onclick = this.pointNameClick;
}
// 通过addEventListener注册事件
for (let i = 0; i < tooltipButton.length; i++) {
tooltipButton[i].addEventListener("click", this.chartClick);
}
},
//并不需要进入页面就检查
// immediate: true,
// deep: true,
},
},
methods: {
chartClick() {
console.log(
this.hookToolTip,
"-------addEventList",
this.hookToolTip.name
);
},
},
//echarts
tooltip: {
// 提示框组件
show: true, // 显示提示框组件
trigger: "item", // 触发类型
triggerOn: "mousemove", // 出发条件
// formatter: "名称:{b}<br/>坐标:{c}",
enterable: true, //允许鼠标进入提示悬浮层中
showContent: true,
triggerOn: "click", //提示框触发的条件 mousemove鼠标移动时触发 click鼠标点击时触发 'mousemove|click'同时鼠标移动和点击时触发
// confine: true, //把toolTip限制在图表的区域内
className: "areaTool",
// hideDelay: 100000, //延时消失时间
formatter: (item) => {
this.hookToolTip = item;
console.log(item, "-----", this.hookToolTip);
// 经纬度太长需要对位数进行截取显示，保留七位小数
// 需要绑定点击事件
var tipHtml = "";
tipHtml =
'<div style="width:2.5rem;height:80%;background:rgba(22,80,158,0.8);border:0.0125rem solid rgba(7,166,255,0.7)">' +
'<div style="width:100%;height:0.375rem;line-height:0.375rem;border-bottom:0.025rem solid rgba(7,166,255,0.7);">' +
'<i style="display:inline-block;width:0.125rem;height:0.125rem;background:#16d6ff;border-radius:0.5rem;">' +
"</i>" +
'<span id="btn-tooltip" style="margin-left:0.125rem;color:#fff;font-size:0.2rem;cursor:pointer" onclick="chartClick">' +
item.name +
"</span>" +
"</div>" +
'<div style="padding:0.1875rem;text-align: left;">' +
'<p style="color:#fff;font-size:0.15rem;">' +
'<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
"</i>" +
"经度" +
'<span style="color:#11ee7d;margin:0 0.075rem;">' +
item.value[0].substr(0, 11) +
"</span>" +
"</p>" +
'<p style="color:#fff;font-size:0.15rem;">' +
'<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
"</i>" +
"纬度" +
'<span style="color:#11ee7d;margin:0 0.075rem;">' +
item.value[1].substr(0, 11) +
"</span>" +
"</p>" +
'<p style="color:#fff;font-size:0.15rem;">' +
'<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
"</i>" +
"考场数" +
'<span style="color:#11ee7d;margin:0 0.075rem;">' +
item.componentIndex +
"</span>" +
"个" +
"</p>" +
'<p style="color:#fff;font-size:0.15rem;">' +
'<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
"</i>" +
"监考教师" +
'<span style="color:#11ee7d;margin:0 0.075rem;">' +
item.componentIndex +
"</span>" +
"个" +
"</p>";
return tipHtml;
},
},
到此这篇关于Vue在echarts tooltip中添加点击事件案例详解的文章就介绍到这了,更多相关Vue的内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了Vue打包后页面出现空白解决办法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
本文主要介绍了vue连接本地服务器的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2024-01-01
这篇文章主要介绍了Vue select 绑定动态变量的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要给大家介绍的是vue-cli 介绍与安装，vue-cli是和vue进行深度组合的工具，可以快速帮我们创建vue项目，并且把一些脚手架相关的代码给我们创建好。真正使用vue开发项目，都是用vue-cli来创建项目的，下面文章详细内容,需要的朋友可以参考一下2021-10-10
本篇文章主要介绍了浅谈vue路径优化之resolve，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
工作中遇到一个需求是根据日历查看某一天/某一周/某一月的睡眠报告，但是找了好多日历组件都不是很符合需求，只好自己手写一个日历组件，顺便记录一下，希望对大家有所帮助2023-04-04
这篇文章主要介绍了vue 弹框产生的滚动穿透问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue实现接口进度条功能，在请求数据的过程中，需要添加监听函数来监测数据请求的过程变化，并更新组件相应的属性和界面元素,本文结合实例代码详细讲解，需要的朋友可以参考下2023-04-04
在日常开发中，我们会遇到一些情况，限制日期的范围的选择，本文就详细的介绍了ElementUI日期选择器时间选择范围限制的实现，文中通过示例代码介绍的非常详细，感兴趣的可以了解一下2022-04-04
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
这篇文章主要介绍了vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论