how to use zrender with vue-echarts to register clicks on bar chart

Question

I'm aware there is a similar question that was asked on here, but this is more specific to vue-echarts. On vue-echarts github page, they state that since version 4.1.0 Vue-Echarts supports ZRender events via zr: prefixed events. I can't really find documentation on how to implement this in vue and am not sure how to go about this. I want to register clicks when a user clicks not only on the bar, but also when they click in the space around the bar.

The following code below only registers clicks when a user clicks directly on the bar.

    <v-chart :options="chartOptionsBar"
             theme="infographic"
             @click="selectBar"
             :autoresize="true"
             ref="chart">
    </v-chart>

The linked post give the following solution for plain js, but i'm not sure how to transform this into something that vue understands. getZr() seemingly does not work with vue.

myChart.getZr().on('click', params => {
  var pointInPixel = [params.offsetX, params.offsetY];
  var pointInGrid = myChart.convertFromPixel('grid', pointInPixel);
  var category = myChart.getModel().get('xAxis')[0].data[pointInGrid[0]]
  console.log(category);
});

I tried npm installing zrender but also get the when trying to initialize a zrender object :

./node_modules/zrender/lib/vml/graphic.js
Module not found: Error: Can't resolve '../graphic/text/parse' in '/node_modules/zrender/lib/vml'

This was a bug, but supposedly was fixed, so I'm not sure if this affects the solution as well. Any help would be appreciated! I currently using vue-echarts v5.0.0, zrender v5.0.3.

Answer 1

Figured out the answer of my question by digging into vue-echarts code

Looking at the following commit, to use zrender events with vue-echarts format it the following way:

 <v-chart :options="chartOptionsBar"
             theme="infographic"
             @click="selectBar"
             @zr:click="outsideBarClick"
             :autoresize="true"
             ref="chart">
 </v-chart>

and in the methods :

outsideBarClick: function(params) {
    console.log(params)
}