fix: 修复双图合并预览/导出为白图的问题

根因:renderOne 里 resolve(cvs) 后立即 chart.dispose(),Promise 微任务在
dispose 之后才执行,此时 echarts 已清空 canvas 内容,合并出来全是白图。
默认主题下因白底白图不易察觉(内容其实一直没画上)。

修复:resolve 前先把内容复制到独立 canvas 副本再 dispose,保证合并时
拿到的是有效像素。深色主题下验证通过(深色背景+彩色内容均正常)。
This commit is contained in:
2026-08-19 12:27:04 +08:00
parent 479d95cb2c
commit 52a245e044
+10 -3
View File
@@ -941,11 +941,18 @@ function generateCombine() {
const chart = echarts.init(holder, null, { renderer: 'canvas' });
chart.setOption(option);
setTimeout(() => {
const cvs = holder.querySelector('canvas');
if (!cvs) { reject(new Error('子图渲染失败')); return; }
resolve(cvs);
const srcCvs = holder.querySelector('canvas');
if (!srcCvs) { reject(new Error('子图渲染失败')); return; }
// 关键:先把内容复制到独立 canvas 再 dispose。
// 直接 resolve 原 canvas 的话,Promise 微任务在 chart.dispose() 之后才执行,
// 此时 canvas 内容已被 echarts 清空,合并出来就是白图。
const copy = document.createElement('canvas');
copy.width = srcCvs.width;
copy.height = srcCvs.height;
copy.getContext('2d').drawImage(srcCvs, 0, 0);
chart.dispose();
holder.remove();
resolve(copy);
}, 80);
});