Vue在echarts tooltip中添加点击事件案例详解

本文主要介绍了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}
坐标:{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 = '' + '' + '' + "" + '' + item.name + "" + "
" + '' + '' + '' + "" + "经度" + '' + item.value[0].substr(0, 11) + "" + "
" + '' + '' + "" + "纬度" + '' + item.value[1].substr(0, 11) + "" + "
" + '' + '' + "" + "考场数" + '' + item.componentIndex + "" + "个" + "
" + '' + '' + "" + "监考教师" + '' + item.componentIndex + "" + "个" + "
"; 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

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 坐标:{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 = '' + '' + '' + "" + '' + item.name + "" + "
" + '' + '' + '' + "" + "经度" + '' + item.value[0].substr(0, 11) + "" + "
" + '' + '' + "" + "纬度" + '' + item.value[1].substr(0, 11) + "" + "
" + '' + '' + "" + "考场数" + '' + item.componentIndex + "" + "个" + "
" + '' + '' + "" + "监考教师" + '' + item.componentIndex + "" + "个" + "
"; return tipHtml; }, },