Vue3+ChartJS年份筛选图表的组件更新问题求助

一、解决初始filterByYear无数据问题 #

• 父组件初始化年份状态，给filterByYear设置默认值（比如当前年份），确保初始有值传递给图表组件：

<script setup>
import { ref } from 'vue'
import selectYear from './selectYear.vue'
import ChartJsBarChart from './ChartJsBarChart.vue'

// 初始化年份为当前年份（数字类型，匹配接口返回格式）
const selectedYear = ref(new Date().getFullYear())

// 接收子组件的年份选择事件，统一转成数字类型
const handleYearChange = (yearStr) => {
  selectedYear.value = Number(yearStr)
}
</script>

<template>
  <selectYear @year-change="handleYearChange" :initial-year="selectedYear" />
  <ChartJsBarChart :filter-year="selectedYear" />
</template>

二、处理年份类型不匹配问题 #

• 在父组件接收子组件emit的年份时，强制将字符串转为数字（或根据接口返回类型统一转换），确保筛选时两边类型完全一致。
• 若接口返回年份为字符串，也可在图表组件内将filter-year转为字符串后再筛选，核心原则是筛选条件与数据字段类型严格匹配。

三、切换年份触发图表更新 #

方案1：监听年份变化重新请求接口（适合大数据量/实时数据场景） #

在ChartJsBarChart组件中，监听filter-year的变化，重新调用接口获取对应年份数据并更新图表：

<script setup>
import { ref, watch, onMounted } from 'vue'
import { Bar } from 'chart.js/auto'
import axios from 'axios'

const props = defineProps({
  filterYear: {
    type: Number,
    required: true
  }
})

const chartInstance = ref(null)
const chartData = ref({
  labels: [],
  datasets: []
})

// 获取对应年份数据
const fetchChartData = async () => {
  try {
    const res = await axios.get('/api/chart-data', {
      params: { year: props.filterYear }
    })
    chartData.value = res.data
    updateChart()
  } catch (err) {
    console.error('获取数据失败:', err)
  }
}

// 更新图表实例
const updateChart = () => {
  if (chartInstance.value) {
    chartInstance.value.destroy() // 销毁旧实例避免内存泄漏
  }
  const ctx = document.getElementById('bar-chart').getContext('2d')
  chartInstance.value = new Bar(ctx, {
    data: chartData.value,
    options: {
      // 自定义图表配置
    }
  })
}

// 初始加载数据
onMounted(() => {
  fetchChartData()
})

// 监听年份变化，重新拉取数据
watch(() => props.filterYear, () => {
  fetchChartData()
}, { immediate: true })
</script>

<template>
  <canvas id="bar-chart"></canvas>
</template>

方案2：本地筛选全量数据（适合小数据量/无需实时请求场景） #

若已提前获取所有年份的全量数据，可在组件内监听年份变化，本地筛选后更新图表：

<script setup>
import { ref, watch, onMounted } from 'vue'
import { Bar } from 'chart.js/auto'
import axios from 'axios'

const props = defineProps({
  filterYear: {
    type: Number,
    required: true
  }
})

const chartInstance = ref(null)
const allData = ref([]) // 存储全量原始数据
const filteredData = ref({ labels: [], datasets: [] })

// 初始获取全量数据
const fetchAllData = async () => {
  try {
    const res = await axios.get('/api/all-chart-data')
    allData.value = res.data
    filterDataByYear()
  } catch (err) {
    console.error('获取全量数据失败:', err)
  }
}

// 按年份筛选数据
const filterDataByYear = () => {
  // 假设原始数据每条含year字段（数字类型）
  const filtered = allData.value.filter(item => item.year === props.filterYear)
  // 转换为ChartJS所需格式
  filteredData.value = {
    labels: filtered.map(item => item.label),
    datasets: [{
      label: '统计数据',
      data: filtered.map(item => item.value)
    }]
  }
  updateChart()
}

// 更新图表
const updateChart = () => {
  if (chartInstance.value) {
    chartInstance.value.data = filteredData.value
    chartInstance.value.update() // 直接更新现有实例，无需销毁
  } else {
    const ctx = document.getElementById('bar-chart').getContext('2d')
    chartInstance.value = new Bar(ctx, {
      data: filteredData.value,
      options: {}
    })
  }
}

onMounted(() => {
  fetchAllData()
})

// 监听年份变化触发筛选
watch(() => props.filterYear, () => {
  filterDataByYear()
})
</script>

四、子组件selectYear.vue适配优化 #

确保子组件初始显示父组件传递的年份，且emit的年份在父组件统一转换：

<script setup>
const props = defineProps({
  initialYear: {
    type: Number,
    required: true
  }
})
const emit = defineEmits(['year-change'])

const selectedYear = ref(props.initialYear.toString()) // 转字符串适配下拉选项

const handleChange = () => {
  emit('year-change', selectedYear.value)
}
</script>

<template>
  <select v-model="selectedYear" @change="handleChange">
    <option value="2022">2022</option>
    <option value="2023">2023</option>
    <option value="2024">2024</option>
  </select>
</template>

内容的提问来源于stack exchange，提问作者user1939481