uni-app中一个页面多张图表时，图表的点击事件只能触发最后一个

在uni-app中，如果你遇到页面中多个图表（如ECharts图表）的点击事件只能触发最后一个的问题，这通常是由于事件绑定时变量作用域冲突引起的。每个图表实例在创建时应该有一个独立的引用和事件处理函数。以下是一个示例代码，展示如何在uni-app页面中正确设置多个ECharts图表的点击事件。

首先，确保你已经安装了@qiun/echarts-for-weixin或者类似的ECharts适配库，并在pages.json中配置了ECharts组件。

然后，在你的页面脚本中，可以这样处理：

<template>
  <view>
    <ec-canvas ref="chart1" canvas-id="chart1" ec="{{ ec1 }}"></ec-canvas>
    <ec-canvas ref="chart2" canvas-id="chart2" ec="{{ ec2 }}"></ec-canvas>
  </view>
</template>

<script>
import * as echarts from '@qiun/echarts-for-weixin';

export default {
  data() {
    return {
      ec1: {
        onInit: this.initChart1
      },
      ec2: {
        onInit: this.initChart2
      },
      charts: {}
    };
  },
  methods: {
    initChart1(canvas, width, height, dpr) {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // New
      });
      this.charts['chart1'] = chart;
      const option1 = {
        // 配置你的第一个图表
        series: [{
          type: 'bar',
          data: [120, 200, 150, 80, 70, 110, 130]
        }]
      };
      chart.setOption(option1);
      chart.on('click', this.handleChartClick.bind(this, 'chart1'));
      return chart;
    },
    initChart2(canvas, width, height, dpr) {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // New
      });
      this.charts['chart2'] = chart;
      const option2 = {
        // 配置你的第二个图表
        series: [{
          type: 'line',
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        }]
      };
      chart.setOption(option2);
      chart.on('click', this.handleChartClick.bind(this, 'chart2'));
      return chart;
    },
    handleChartClick(chartId, params) {
      console.log(`Chart ${chartId} clicked`, params);
    }
  }
};
</script>

在这个例子中，每个图表都有一个独立的init函数和事件处理函数绑定。handleChartClick方法通过chartId参数区分是哪个图表被点击。这样，每个图表的点击事件都能正确触发，并且可以在控制台中看到相应的点击信息。