vue项目实现Echarts在tooltip中获取点击事件
此时针对tooltip设置了点击事件,formatter配置了两个点击事件,可自行设置样式todoSthLook方法内绑定了方法回调,先获取当前class对象,获取后进行点击事件监听,即可解决问题如果觉得还不错的话,给个关注或者点赞吧!...
·
- 实际开发需求中,针对vue项目内引入的Echarts需要tooltip能够进行点击以及获取点击事件,小编找了好多资料都无法实现,最终找到了方法
在vue+echarts项目内,首先针对echarts的配置tooltip进行设置,并对点击的div设置class类名
...
let that = this;
option = {
tooltip: {
show: true,
enterable: true,
triggerOn: 'click',// item 图形触发, axis 坐标轴触发, none 不触发
trigger: 'item',
// 浮层隐藏的延迟
hideDelay: 800,
formatter: function(params) {
let name = that.getTooltipName(params);//进行显示提示框添加事件
var html = `<div class='specialLook' οnclick="${that.todoSthLook(params.type)}">查看画像</div>
<div class='addSearch' οnclick="${that.todoSthSearch(params.type)}">添加搜索</div>`;
return html;
}
}
...
- 此时针对tooltip设置了点击事件,formatter配置了两个点击事件,可自行设置样式
todoSthLook方法内绑定了方法回调,先获取当前class对象,获取后进行点击事件监听,即可解决问题
// 查看画像
todoSthLook (type) {
this.$nextTick(() => {
let obj1 = document.getElementsByClassName('specialLook')[0];
obj1.addEventListener('click', function () {
//TODOSth
});
});
},
// 添加搜索
todoSthSearch (type) {
let that = this;
this.$nextTick(() => {
let obj1 = document.getElementsByClassName('addSearch')[0];
obj1.addEventListener('click', function () {
//TODOSth
});
});
},
如果觉得还不错的话,给个关注或者点赞吧!
更多推荐
已为社区贡献21条内容
所有评论(0)