vue-chartjs结合chart.js报错：Canvas复用前需销毁对应ID图表

Canvas is already in use. Chart with ID '<N>' must be destroyed before the canvas can be reused 报错由以下几个代码问题共同导致：

• 两个图表组件的name配置完全一致，均为CChartBarExample，Vue组件解析、实例化时会出现渲染冲突，导致canvas节点属性重复
• 柱状图（Bar）组件未显式传入chart-id属性，vue-chartjs会使用默认id值，和其他未指定id的图表实例撞id
• 折线图（Line）组件的chart-id绑定了动态随机值，组件每次重渲染都会生成新id，旧id对应的Chart实例未被正常销毁，直接占用canvas节点触发报错
• 两个组件都存在必要props缺失问题：Bar组件未传chart-options、chart-data，Line组件直接传空对象作为chart-data，也会加剧实例初始化异常

1. 修正柱状图组件代码 #

给组件设置唯一name，补全必填props，传入固定唯一的chart-id：

<template>
  <Bar
    :chart-options="chartOptions"
    :chart-data="chartData"
    chart-id="base-bar-chart"
  />
</template>

<script>
import { Bar } from 'vue-chartjs'

export default {
  name: 'BaseBarChart',
  components: { Bar },
  data() {
    return {
      chartOptions: {
        responsive: true,
        // 补充其余柱状图配置
      },
      chartData: {
        // 补充实际柱状图数据，不要留空
        labels: [],
        datasets: []
      }
    }
  }
}
</script>

2. 修正折线图组件代码 #

修改组件name为唯一值，把动态随机chart-id改为固定值，补全合法的chart数据：

<template>
  <Line
    :chart-options="chartOptions"
    :chart-data="chartData"
    chart-id="base-line-chart"
  />
</template>

<script>
import { Line } from 'vue-chartjs'

export default {
  name: 'BaseLineChart',
  components: { Line },
  data() {
    return {
      chartOptions: {
        responsive: true,
        // 补充其余折线图配置
      },
      chartData: {
        // 补充实际折线图数据，不要传空对象
        labels: [],
        datasets: []
      }
    }
  }
}
</script>

3. 校验全局注册逻辑 #

你在main.js中已经注册了LineController、BarElement、LinearScale等必要的Chart.js模块，这部分配置没有问题，无需额外调整。

注意事项：禁止给chart-id绑定随机数、时间戳这类每次渲染都会变化的动态值，同一页面下所有图表的chart-id必须是固定、全局唯一的静态值，否则组件更新时会重复创建Chart实例，触发canvas占用报错。同时要保证项目内所有Vue组件的name值唯一，避免组件渲染冲突。

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