Vue项目中Echarts的onClick点击事件无法调用外部方法如何解决

普通函数作为Echarts事件回调时，函数内部的this指向的是Echarts实例对象，而非Vue组件实例，因此无法访问到Vue实例上定义的methods、data等属性。

方案1：使用箭头函数（最常用） #

箭头函数不会创建自己的this，会继承外层作用域的this指向，此处外层mounted钩子的this就是Vue组件实例。
修改后的代码：

mounted() {
  this.myChart = echarts.init(document.getElementById("geoMap"))

  this.myChart.on('click', (params) => {
    console.log(params)
    this.setSelectedState(params)
  })
}

方案2：提前保存Vue实例指向 #

在回调函数外层先把Vue实例赋值给临时变量，回调内通过临时变量调用方法：

mounted() {
  this.myChart = echarts.init(document.getElementById("geoMap"))
  const vm = this // 提前保存Vue实例
  this.myChart.on('click', function(params){
    console.log(params)
    vm.setSelectedState(params)
  })
}

方案3：通过bind绑定this指向 #

用Function.prototype.bind手动将回调函数的this绑定为Vue组件实例：

mounted() {
  this.myChart = echarts.init(document.getElementById("geoMap"))

  this.myChart.on('click', function(params){
    console.log(params)
    this.setSelectedState(params)
  }.bind(this)) // 绑定this为当前Vue实例
}

组件销毁时需要主动解绑Echarts事件、销毁实例，避免内存泄漏：

beforeUnmount() {
  if (this.myChart) {
    this.myChart.off('click') // 解绑点击事件
    this.myChart.dispose() // 销毁Echarts实例
    this.myChart = null
  }
}

内容的提问来源于stack exchange，提问作者Stevan Najeeb