vue3 echarts 柱状图点击事件

在Vue3中实现Echarts柱状图的点击事件，可以使用Echarts提供的API和Vue3的生命周期函数来实现。具体实现步骤如下：
1. 在Vue3的setup函数中引入Echarts，并初始化Echarts图表。
2. 在mounted生命周期函数中，使用Echarts提供的API和Vue3的$refs属性获取Echarts图表对象，并绑定点击事件。
3. 在点击事件中，使用Echarts提供的API获取点击位置的坐标，并根据坐标获取对应的数据索引。
4. 根据数据索引进行相应的操作，例如跳转路由并携带参数。

下面是一个示例代码，实现了Echarts柱状图的点击事件：

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

<script>
import * as echarts from 'echarts';

export default {
  setup() {
    let chart;

    const initChart = () => {
      chart = echarts.init(document.getElementById('chart'));
      // 初始化Echarts图表
      // ...
    };

    return {
      initChart,
    };
  },
  mounted() {
    this.initChart();
    const chart = this.$refs.chart;
    // 获取Echarts图表对象
    chart.getZr().on('click', (params) => {
      const pointInPixel = [params.offsetX, params.offsetY];
      // 获取点击位置的坐标
      if (chart.containPixel('grid', pointInPixel)) {
        const index = chart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)[0];
        // 获取对应的数据索引
        if (index !== undefined) {
          // 根据数据索引进行相应的操作，例如跳转路由并携带参数
          // ...
        }
      }
    });
  },
};
</script>