Echarts OnClick Methods not reaching external methods in Vue

Question

So I have implemented Echarts with a Vue application, on one of the charts, I am trying to get the item clicked and pass it back to the parent component that way I can do specific calculations to it.

The 'on click' method works and I can console.log('params') easily, however, trying to reach any other functions outside of it is not possible for some reason...

here is my code...

data() {
   return {
      myChart: null,
      selectedState: {}
   }
}.
mounted() {
   this.myChart = echarts.init(document.getElementById("geoMap"))

   this.myChart.on('click', function(params){
      // It will run the console.log with correct info, but the 
      // method is not reachable...
      console.log(params)
      this.setSelectedState(params)
   })
},

// Inside my vue script this is just a method to set the data for now...
methods: {
   setSelectedState(params){
      this.selectedState = params
   },
}

any help would be nice!! thanks!

Answer 1

You're not in the Vue component context when listening to the chart event, so you have to change your callback function to an arrow one to access the component's this :

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

methods: {
  setSelectedState(params) {
    console.log(params);
    this.selectedState = params
  }
}

By the way, you should use ref instead of getting your div with document.getElementById to attach your chart :

<div ref="geoMap"></div>

this.myChart = echarts.init(this.$refs.geoMap);