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

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 `<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

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" οnclick="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
    }
}
 
————————————————
版权声明：本文为CSDN博主「Y...................」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/yyXieDaiMa/article/details/109777551