How to use the function updateAxisPointer in vue-echarts-v4.1?

Question

In version 3, you can use the function and event of the echarts themselves directly, overriding the function for the event, as written const updateAxisPointer = function(event)... I can’t understand how to do this in version 4. Here is a [link][1] to version 4. I tried to work with the delegateMethod function, but it displays the error this.chart [methodName] is not a function.

const updateAxisPointer = function(event) {
          console.log('event', event);
};
this.$refs.eChart.delegateGet('updateAxisPointer', updateAxisPointer);

Here is how the code looks for version 3

  <div class="echarts">
    <IEcharts :option="option" @ready="onReady" />
  </div>
</template>

<script>
import IEcharts from 'vue-echarts-v3/src/full.js';

export default {
  name: 'View',
  components: {
    IEcharts,
  },
  data() {
    // const that = this
    return {
      ins: null,
      echarts: null,
      option: {
        legend: {
          orient: 'vertical',
          top: 40,
          left: 60,
        },
        tooltip: {
          trigger: 'axis',
          showContent: false,
        },
        dataset: {
          source: [],
        },  
        yAxis: {
          type: 'value',
          name: '',
          nameLocation: 'middle',
          nameGap: 40,       
        },
        grid: {
          left: 40,
          right: 37,
          bottom: 45,
          top: '50%',
          containLabel: true,
        },
        series: [],
      }
    };
  },
  methods: {
    onReady(instance, echarts) {
      const that = this;
      that.ins = instance;
      that.echarts = echarts;

      const updateAxisPointer = function(event) {
        let xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
          let dimension = xAxisInfo.value + 1;
          that.ins.setOption({
            series: {
              id: 'pie',
              label: {
                formatter: '{b}: {@[' + dimension + ']} ({d}%)',
              },
              encode: {
                value: dimension,
                tooltip: dimension,
              },
            },
          });
        }
      };
      that.ins.on('updateAxisPointer', updateAxisPointer);
    },
  },
};
</script>```


  [1]: https://github.com/ecomfe/vue-echarts/blob/master/src/components/ECharts.vue

Answer 1

You can use @updateAxisPointer directly with Vue's event handling. I tested the following example with vue-echarts-v5.0 but it should already work in version 4.1.

App.vue:

<template>
    <chart 
       :options="options"
       @updateAxisPointer="updateAxisPointer"
       >
    </chart>
</template>

<script>
import ECharts from 'vue-echarts'
export default {
  name: 'Interactive',
  components: {
    'chart': ECharts,
  },
  data() {
    return {
      options: {
        title: {
          text: 'Interactive example chart',
          left: 'center',
          textStyle: {
            color: '#000'
          }
        },
        tooltip: {
          trigger: 'axis',
          showContent: false
        },
        dataset: {
          source: [
            ['technology', '2012', '2013', '2014', '2015', '2016', '2017'],
            ['photovoltaic', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
            ['wind', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
            ['natural gas', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
            ['coal', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1],
            ['oil', 50.2, 60, 60.2, 70.4, 50.9, 39.1],
            ['battery', 20, 30, 80.2, 50.4, 10.9, 29.1],
            ['hidrogen', 30, 40, 60, 50, 50, 19.1]
          ]
        },
        xAxis: {type: 'category'},
        yAxis: {gridIndex: 0},
        grid: {top: '55%'},
        series: [
          {type: 'line', smooth: true, seriesLayoutBy: 'row'},
          {type: 'line', smooth: true, seriesLayoutBy: 'row'},
          {type: 'line', smooth: true, seriesLayoutBy: 'row'},
          {type: 'line', smooth: true, seriesLayoutBy: 'row'},
          {type: 'line', smooth: true, seriesLayoutBy: 'row'},
          {type: 'line', smooth: true, seriesLayoutBy: 'row'},
          {type: 'line', smooth: true, seriesLayoutBy: 'row'},
          {
            type: 'pie',
            id: 'pie',
            radius: '30%',
            center: ['50%', '30%'],
            label: {
              formatter: '{b}: {@2012} ({d}%)'
            },
            encode: {
              itemName: 'technology',
              value: '2012',
              tooltip: '2012'
            }
          }
        ]
      }
    };
  },
  methods: {
    updateAxisPointer(params) {
      var xAxisInfo = params.axesInfo[0];
      if (xAxisInfo) {
        var dimension = xAxisInfo.value + 1;
        this.options.series = [{
          id: 'pie',
          label: {
            formatter: '{b}: {@'+dimension+'} ({d}%)'
          },
          encode: {
            value: dimension,
            tooltip: dimension
          }
        }]
      }
    },
  },
};
</script>