在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. 更新您的模板以直接侦听图表单击事件。
2. 在您的事件处理程序中，您可以直接访问 ECharts 提供的 params 对象。

以下是调整代码的方法：

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

<script setup>
import { ref, defineProps, onMounted, computed } from 'vue';
import { use } from 'echarts/core';
import VChart from 'vue-echarts';
import { LineChart } from 'echarts/charts';
import {
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  MarkLineComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

// 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) => {
  console.log('Clicked on chart', params);
  // Now `params` will include all the information about the clicked point, including its series and data.
  // You can directly access the xAxis value if it's a category type via `params.name` in many cases.
  console.log('X-Axis value:', params.name);
};

</script>