先看一下需求

formatter中添加点击事件
产品需要在formatter中点击上面跳转到另一个页面，也就是在formatter中需要添加点击事件
网上其实有解决方法，我参考的文章是下面的链接
https://blog.csdn.net/zeng092210/article/details/99645107

问题

1.click函数并不执行

2.在vue项目中click对应的函数找不到

解决方案1

问题1出现的原因是：css样式没有添加 pointer-events: all 这点很重要，很重要，很重要，重要的事情说三遍，因为没有添加 pointer-events: all 所以监听不到事件

问题2出现的原因：formatter中定义的函数，跟Vue不在一个作用域下，也就是在vue中methods中写的方法，没法执行

解决方法是： 在vue项目中找到index.html文件，然后在<script></script>标签中写入刚才在formatter上绑定的函数，而且绑定函数不能用@click写，要用onclick写，用js的方式写绑定，因为formatter的作用域不是vue的作用域，用@click监听不到

下面是echart中formatter中的配置

tooltip : {
    triggerOn: 'click',   //触发方式
    enterable: true, // 鼠标可移入tooltip中
    formatter:function (params) {
      return `<span onclick="myClick">这是显示的文本</span>` // 记得要加css样式pointer-events: all 
    }
}

在index.html中加入点击事件

function myClick() {
      console("监听到事件")
      let url = window.location.href
      let goToUrl = url.split('#')[0] + '#/myNextPage'
      window.open(goToUrl, "_self")
}

解决这个问题花了小半天时间，然后跟同事说后，同事说你不是就只需要跳转到其他页面吗，那为啥不用a标签
一语惊醒梦中人啊，真是够笨的，原来一个a标签跳转问题就能解决的，我搞了半天

解决方案2

tooltip : {
    triggerOn: 'click',   //触发方式
    enterable: true, // 鼠标可移入tooltip中
    formatter:function (params) {
      let url = window.location.href
      let goToUrl = url.split('#')[0] + '#/myNextPage'
      return `<a href="${goTourl}">这是显示的文本</a>`
    }
}

当然如果上面进入的页面需要参数的话，也可以拼接到goToUrl后面，完美解决

解决方案3(更新，这方法我没试，有人说不行，你们别看了)

最近再搞离线地图模块，同样遇到了这样的问题，在地图上的标记弹框中的事件无法监听到，解决方法是用Vue.extend()

import Vue from 'vue'

methods : {
getHtmlComponent() {
        const infoContent = `<span onclick="myClick">这是显示的文本</span>`
        const MyComponent = Vue.extend({
          template: infoContent,
          methods: {
            myClick: function() {
              console.log('点击事件监听到')
            }
          }
        })
        var component = new MyComponent().$mount()
        return component
}
}

tooltip : {
    triggerOn: 'click',   //触发方式
    enterable: true, // 鼠标可移入tooltip中
    formatter:(params)=> {
      const component = this.getHtmlComponent()
      return component 
    }
}

总结

三种方式都能实现在formatter中跳转到另一个页面，方案1中可以请求接口，方案2只能实现跳转页面，方案3比较好的是，利用Vue.extend手动挂载dom,如果在tooltips中事件比较多，不会污染全局index.html，保证每个独立模块完成独立的功能