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

水深无声 2023-10-05 13:51 27阅读 0赞

### 1.问题描述 ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5WGllRGFpTWE_size_16_color_FFFFFF_t_70][]

### 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 `<div class=chartLabel>
                  <div class=title>${params.name}</div>
                  <div class=label>到达时间：2020.10.11</div>
                  <button id="btn-tooltip">查看更多</button>
                </div>`
                }
              },

### 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 =
                `<div class=chartLabel>
                  <div class=title>${params.name}</div>
                  <div class=label>到达时间：2020.10.11</div>
                  <div class=label>离开时间：2020.11.11</div>
                  <button id="btn-tooltip">监控视频</button>
                </div>`
                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][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 =
                `<div class=chartLabel>
                  <div class=title>${params.name}</div>
                  <div class=label>到达时间：2020.10.11</div>
                  <div class=label>离开时间：2020.11.11</div>
                  <button id="btn-tooltip" onclick="onClickSeries(\'` + params.name + `\',\' ` + this.id  + `\')">监控视频</button>
                </div>`
              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
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5WGllRGFpTWE_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201118164816261.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5WGllRGFpTWE=,size_16,color_FFFFFF,t_70
[DEMO]: https://blog.csdn.net/z_dmsd/article/details/103517123?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~first_rank_v2~rank_v28-4-103517123.nonecase&utm_term=echart%20%E4%BA%8B%E4%BB%B6%20%E7%82%B9%E5%87%BBtooltip&spm=1000.2123.3001.4430