Vue3原生使用Chart.js同页面渲染多个独立折线图 数据串扰问题如何解决

核心问题定位 #

你的猜测完全正确：所有图表实例共用全局datasets对象引用是数据串混的核心诱因，叠加几处逻辑bug后，串数据的异常会被进一步放大：

• 全局定义的datasets、chartData都是模块级单例，所有组件实例在初始化、更新时直接传引用，没有做独立拷贝，所有实例操作的都是同一个内存里的对象。往这个共享数组里push数据的时候，自然会把所有传感器的数值都塞进同一个数据源，最终所有图表显示的都是混杂了全部传感器信息的曲线。
• watchEffect中嵌套创建setInterval的逻辑存在泄漏：只要响应式依赖变化，就会新建一个3秒周期的更新定时器，组件会同时挂多个定时器，重复执行更新操作，进一步加快数据串混的速度。
• 更新逻辑中的chh.data = {}属于无效操作：Chart.js初始化时会绑定传入配置的内部引用，你在更新完数据后把chh.data赋成空对象根本不会清空实例内部维护的状态，反而会因为反复给data赋值全局共享datasets，打乱整个引用链路。
• 组件卸载时没有做图表实例、定时器的清理，已经销毁的组件依然会在后台执行更新，间接污染其他存活实例的数据状态。

可直接落地的修复步骤 #

1. 切断跨实例的引用共享
   保留全局的图表样式、默认配置作为模板，但所有组件实例在初始化时必须生成独立的深拷贝副本，绝对不能直接把全局单例对象传给Chart.js构造函数。
   示例代码：

   // 全局仅保留可复用的配置模板，不存可变数据
   const baseChartTemplate = {
     type: "line",
     options: { /* 原有全局通用配置 */ },
     defaultDatasets: {
       labels: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
       datasets: [
         {
           data: [0],
           fill: true,
           backgroundColor: ["rgba(20, 120, 60, 0.3)"],
           borderColor: ["rgba(20, 120, 60, 0.9)"],
           borderWidth: 2,
           pointRadius: 0
         }
       ]
     }
   }
   

2. 重写图表初始化与更新逻辑
   每个组件实例初始化时，通过深拷贝生成专属的配置，不与其他实例共享任何可变对象引用：

   setup(props) {
     let chart = null
     let updateTimer = null
     let canvasCtx = null
   
     function createChart(ctx) {
       // 每个实例拿独立的配置副本，不碰全局模板
       const instanceConfig = structuredClone(baseChartTemplate)
       instanceConfig.data = instanceConfig.defaultDatasets
       delete instanceConfig.defaultDatasets
       return new Chart(ctx, instanceConfig)
     }
   
     function updateChartData() {
       // 直接操作当前实例自己的数据数组，不依赖全局对象
       const currentDataArr = chart.data.datasets[0].data
       currentDataArr.push(Number(props.thermData))
       // 保持10个点的滑动窗口长度
       if (currentDataArr.length > 10) {
         currentDataArr.shift()
       }
       chart.update()
     }
   
     onMounted(() => {
       canvasCtx = document.getElementById(props.id).getContext("2d")
       if (canvasCtx) {
         chart = createChart(canvasCtx)
         // 定时器仅在挂载时创建一次
         updateTimer = setInterval(updateChartData, 3000)
       }
     })
   
     // 组件卸载时彻底清理资源，避免泄漏
     onUnmounted(() => {
       if (updateTimer) clearInterval(updateTimer)
       chart?.destroy()
     })
   }
   

3. 移除无效的覆写逻辑
   删掉原代码中chh.data = {}的操作，这个操作既无法隔离数据，还会打乱Chart.js内部的状态追踪。

修复效果 #

• 每个图表持有完全独立的数据源数组，从根上切断实例之间的引用关联，不会再出现其他传感器的数据混入当前图表的问题
• 每个组件的更新逻辑只操作自己的图表实例，定时任务的数量、执行逻辑完全可控
• 组件卸载时会主动释放canvas资源、清理定时器，不会出现内存泄漏或后台无效更新的问题

内容的提问来源于stack exchange，提问作者k.d.ivanov