vue3中如何给下拉框的多个值绑定点击事件弹出对应的统计图

在 Vue3 中给下拉框的多个值绑定点击事件弹出对应的统计图，可以采用以下步骤：

1. 在模板中，使用 `select` 元素创建下拉框，并使用 `v-model` 指令将选中的值绑定到一个 data 属性中；

2. 在 `select` 元素中，使用 `v-for` 指令遍历所有选项，并使用 `:value` 绑定每个选项的值；

3. 在 `select` 元素中，使用 `@change` 绑定一个方法，当选中的值发生变化时会触发该方法；

4. 在绑定的方法中，根据选中的值显示对应的统计图，可以使用条件语句或者对象字面量来根据选中的值判断应该显示哪个统计图。

下面是一个简单的示例代码：

<template>
  <div>
    <select v-model="selectedValue" @change="showChart">
      <option v-for="(option, index) in options" :key="index" :value="option.value">{{ option.label }}</option>
    </select>
    <div v-if="selectedValue === 'pie'">
      <pie-chart></pie-chart>
    </div>
    <div v-else-if="selectedValue === 'bar'">
      <bar-chart></bar-chart>
    </div>
  </div>
</template>

<script>
import PieChart from './PieChart.vue'
import BarChart from './BarChart.vue'

export default {
  components: {
    PieChart,
    BarChart
  },
  data() {
    return {
      selectedValue: '',
      options: [
        { label: '饼图', value: 'pie' },
        { label: '柱状图', value: 'bar' }
      ]
    }
  },
  methods: {
    showChart() {
      if (this.selectedValue === 'pie') {
        // 显示饼图
      } else if (this.selectedValue === 'bar') {
        // 显示柱状图
      }
    }
  }
}
</script>

在这个示例中，我们通过 `v-model` 将选中的值绑定到 `selectedValue` 属性中，通过 `v-for` 遍历所有选项，并使用 `@change` 绑定 `showChart` 方法。在 `showChart` 方法中，根据选中的值显示对应的统计图。注意，在模板中使用 `v-if` 和 `v-else-if` 来根据条件显示不同的组件。