I can't get the x-axis value when clicking on a line chart in Vue ECharts

Question

I have a basic line chart for a page in my Vue app, using the Vue-ECharts package.

When I click on the chart, I want to be able to get the value on the x-axis of the click. However when params comes through in the log, there is no name value, and seriesIndex always appears as 0 wherever I click. I feel I am missing something obvious, and gone down the route of am struggling to expose the chart instance to be able to access methods like "convertFromPixel". Any help gratefully received!

<template>
  <v-chart ref="echart" :option="chartOptions" class="echart" autoresize @click="onChartClick"  />
</template>

<script setup>
import { use } from "echarts/core";
import VChart from 'vue-echarts';

// Manually import ECharts modules used in the component
import { LineChart } from 'echarts/charts';
import { TooltipComponent, GridComponent, DatasetComponent, TransformComponent, MarkLineComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

import { ref, defineProps, computed } from 'vue';

// Register the necessary ECharts components
use([
LineChart,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
MarkLineComponent,
CanvasRenderer
]);

//receive data
const props = defineProps({
projectionData: Object
});

const projectionData = computed(() => props.projectionData);

const chartOptions = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      lineStyle: {
        color: '#F66',
        width: 2,
        type: 'dashed'
      }
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: projectionData.value.labels // Your x-axis labels
  },
  yAxis: {
    type: 'value',
    min: 'dataMin'
  },
  series: [
    {
      name: 'Financial Projection',
      type: 'line',
      data: projectionData.value.data.amount, // Your series data
      smooth: true,
      symbol: 'none',
      areaStyle: {},
      triggerLineEvent: true
    }
  ],
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
});

const onChartClick = (params) => {
   // Access the echarts instance from the VChart component
     console.log('click', params);
};

</script>

I have tried putting the click function in methods{} part of the chart options, and tried adding listeners onMounted, but they also fail to find the chart instance and so I can't access direct echarts methods.

Answer 1

Managed to solve this using echarts directly:

<template>
 <div ref="chart" style="width: 100%; height: 100%;"></div>
</template>

 <script setup>
   import { ref, onMounted, computed } from 'vue';
   import * as echarts from 'echarts';

   const chart = ref(null);

   onMounted(() => {
     // Initialize ECharts instance
     const instance = echarts.init(chart.value);

     const handleClick = (params) => {
       let year;
       if (params.name) year= params.name;
       else {
         const pointInPixel = [params.event.offsetX, params.event.offsetY];
         const pointInGrid = instance.convertFromPixel('grid', pointInPixel);
         year = data.value.labels[pointInGrid[0]];
       }
       console.log(year);
   };

     // Configure the chart options
     const options = {
       tooltip: {
       trigger: 'axis',    
    },
       xAxis: {
         type: 'category',
      data: data.value.labels
       },
       yAxis: {
         type: 'value'
       },
       series: [{
         type: 'line',
         data: data.value.data.values,
         areaStyle: {},
         triggerLineEvent: true
       }],
       grid: {
       left: '0%',
       right: '3%',
       bottom: '0%',
       containLabel: true
     },
     };

    // Set options to the chart instance
     instance.setOption(options);

     // Add click event listener to the chart
     instance.on('click', handleClick);
   });
   </script>