Vue3单页渲染多个同类型Chart.js图表出现canvas占用报错问询

这个报错的核心原因是多个Chart.js实例共用了同一个画布引用或者全局实例计数器/存储，仅给组件分配唯一id无法解决问题，大概率是基础组件内部的Chart实例没有和当前组件实例绑定，出现了跨组件的实例覆盖。

第一步：重构Chart.vue基础组件，确保实例与当前组件强绑定 #

每个Chart.vue组件必须持有私有的canvas引用和Chart实例，禁止使用全局选择器查找画布，禁止将实例挂载到公共作用域：

<!-- Chart.vue 正确写法示例 -->
<template>
  <!-- 用ref获取当前组件内的canvas，不要用id+document选择器查找 -->
  <canvas ref="chartRef"></canvas>
</template>

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

const props = defineProps(['chartType', 'chartData', 'chartOptions'])
// 每个组件私有的canvas引用
const chartRef = ref(null)
// 每个组件私有的Chart实例存储
let myChart = null

onMounted(() => {
  initChart()
})

// 监听配置变化自动更新图表
watch(() => [props.chartData, props.chartOptions], () => {
  if (myChart) myChart.update()
}, { deep: true })

const initChart = () => {
  // 初始化前先销毁当前组件已存在的实例，避免重复初始化冲突
  if (myChart) {
    myChart.destroy()
  }
  // 直接使用当前组件的ref对应的画布，不需要查询全局DOM
  myChart = new Chart(chartRef.value, {
    type: props.chartType,
    data: props.chartData,
    options: props.chartOptions
  })
}

// 组件卸载前必须销毁当前实例，释放画布资源
onBeforeUnmount(() => {
  if (myChart) {
    myChart.destroy()
    myChart = null
  }
})
</script>

第二步：检查BarLine.vue避免全局变量污染 #

所有图表配置、数据都要定义在<script setup>内部，不要写在全局作用域，避免多个BarLine组件实例共用同一份配置导致冲突：

<!-- BarLine.vue 示例 -->
<template>
  <Chart 
    chartType="bar" 
    :chartData="localChartData" 
    :chartOptions="localChartOptions"
  />
</template>

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

// 所有配置定义在setup内部，每个组件实例单独生成一份
const localChartData = ref({
  labels: ['1月', '2月', '3月', '4月', '5月'],
  datasets: [
    { type: 'bar', label: '销售额', data: [123, 234, 345, 210, 420] },
    { type: 'line', label: '增长率', data: [12, 23, 34, 18, 29], yAxisID: 'y1' }
  ]
})

const localChartOptions = ref({
  scales: {
    y: { beginAtZero: true, title: { display: true, text: '万元' } },
    y1: { position: 'right', beginAtZero: true, title: { display: true, text: '%' } }
  }
})
</script>

第三步：Home.vue直接调用组件即可 #

不需要额外加销毁逻辑，每个组件会自主维护实例生命周期，多次调用不会冲突：

<!-- Home.vue 示例 -->
<template>
  <div class="chart-container">
    <BarLine />
    <BarLine />
    <BarLine />
    <!-- 任意数量同类型组件都可正常渲染 -->
  </div>
</template>

<script setup>
import BarLine from './BarLine.vue'
</script>

• 销毁canvas的操作误操作了全局的同一个画布，没有对应到每个组件自己的私有画布
• 仅分配唯一id但仍用全局选择器查找canvas，容易出现选择顺序错误拿到其他组件的画布
• 复制多份组件但内部仍使用全局的实例存储，依然会出现实例覆盖问题
• 切换不同类型图表正常是因为不同类型的初始化逻辑触发了全局实例的强制销毁，刚好避开了冲突

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