在Vue ECharts中点击我的折线图时无法获取x轴值

Question

我的 Vue 应用程序中有一个页面的基本折线图，使用 Vue-ECharts 包。

当我单击图表时，我希望能够获取单击的 x 轴上的值。但是，当 params 在日志中出现时，没有名称值，并且无论我单击什么位置，seriesIndex 始终显示为 0。我觉得我错过了一些明显的东西，并且沿着努力公开图表实例以便能够访问“convertFromPixel”等方法的路线。非常感谢您的帮助！

<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>

我尝试过将点击函数放在图表选项的methods{}部分中，并尝试在onMounted上添加监听器，但也找不到图表实例，因此无法直接访问echarts方法。

Answer 1

1. 可以通过您为 v 图表定义的引用来访问图表实例。
2. 您在图表上单击获得的 params 对象应包含有关系列、数据点的信息 一旦您访问了 ECharts 实例，您就可以使用 ConvertFromPixel 方法从像素位置获取轴值。
3. 一旦您访问了 ECharts 实例，您就可以使用 ConvertFromPixel 方法从像素位置获取轴值。

以下是调整代码的方法：

import { onMounted, ref } from 'vue';

const echartRef = ref(null); // Ref for accessing the VChart

// This function will be called after the component is mounted
onMounted(() => {
  const chartInstance = echartRef.value.getEchartsInstance();

  // You can now use chartInstance for various operations
  chartInstance.on('click', function(params) {
    // exxample of getting x-axis value from pixel
    const xAxisIndex = 0; // assuming you want the first xAxis in case there are multiple
    const xValue = chartInstance.convertFromPixel({ seriesIndex: 0 }, [params.event.offsetX, params.event.offsetY])[0];
    console.log('X-Axis value from click:', xValue);
  });
});

// modify your template to use the ref
<template>
  <v-chart ref="echartRef" :option="chartOptions" class="echart" autoresize />
</template>