echarts tooltip绑定点击事件并弹出弹框

2023-09-04 17:26| 来源: 网络整理| 查看: 265

1.问题描述

实现如图效果，当鼠标悬浮/点击小脚位置时，弹出tooltip框，并且鼠标点击查看更多按钮弹出弹框。

2. 实现步骤

2.1 问题汇总

样式不生效（提示框设置样式必须为全局样式）

按钮点击无响应（按钮样式增加 pointer-events: auto）

按钮点击方法不执行（需增加全局作用域的样式， tooltip无法使用vue组件的方法，必须定义windows全局上）

tooltip字段主要配置如下

tooltip: { // 鼠标是否可以进入悬浮框 enterable: true, // 触发方式 mousemove, click, none, mousemove|click triggerOn: `mousemove`, // item 图形触发， axis 坐标轴触发， none 不触发 trigger: `item`, // 浮层隐藏的延迟 hideDelay: 800, // 背景色 backgroundColor: `rgba(0,0,0,0)`, formatter: function (params) { return ` ${params.name} 到达时间：2020.10.11 查看更多 ` } }, 3.实现方式1

问题： tooltip绑定的事件需要在全局作用域下，当前使用vue开发不想将方法定义在window，并且如果定于在window下的话弹框也需要与其在同一作用域下。

解决

1.增加一个变量hookToolTip用来保存当前点击的位置名称（数据改变的时候，动态设置options）

this.options.tooltip.formatter = function (params) { if (params.seriesType === `scatter`) { setTimeout(() => { this.hookToolTip = params.name }, 1000) const label = ` ${params.name} 到达时间：2020.10.11 离开时间：2020.11.11 监控视频 ` return label } }.bind(this) }

2.位置改变时，监听hookToolTip获取Dom绑定事件

watch: { hookToolTip: function (name) { this.$nextTick(() => { const html_ = document.querySelector(`#btn-tooltip`) html_ && html_.addEventListener(`click`, () => { // 点击事件弹框显示 this.dialogVisible = true }) }) } },

这种方式的缺陷：虽然能实现功能，但是需要设置setTimeOut, 这里由于hookToolTip改变的时候，提示框不一定已经渲染，会导致获取不到DOM

4.实现方式2

参考：参考DEMO

1.在当前vue组件中定义一个全局的事件及一个全局的对象（为一个对象，保存所有实例的tooltip按钮的回调事件）注意：全局需要定义在default export {} 外

// params 当前tooltip数据， key: 当前实例的键值 window.onClickSeries = function (params, key) { // 获取当前id地图的回调方法并执行 globalMap[key.trim()](params, key) } // 用来保存所有的地图实例 const globalMap = {}

2. 当数据改变时, 在修改options的方法中设置formatter

注意：1. onclick绑定方法参数的拼接方式，2. 按钮css样式必须设置pointer-events: auto 3.formatter方法需要重新绑定this

methods：{ setOptionsValue () { this.options.tooltip.formatter = function (params) { if (params.seriesType === `scatter`) { /* eslint-disable */ const label = ` ${params.name} 到达时间：2020.10.11 离开时间：2020.11.11 监控视频 ` return label /* eslint-enable */ } }.bind(this) this.mapChart.setOption(this.options, true) } }

3. 在mounted中给全局对象globalMap绑定当前实例对应的回调方法

mounted () { // 设置tooltip点击的回调事件， this.id 为当前图表的唯一标识 globalMap[this.id] = (params, id) => { this.dialogVisible = true } }

【本文地址】

公司简介

联系我们