fix: 修复双图合并预览/导出为白图的问题
根因:renderOne 里 resolve(cvs) 后立即 chart.dispose(),Promise 微任务在 dispose 之后才执行,此时 echarts 已清空 canvas 内容,合并出来全是白图。 默认主题下因白底白图不易察觉(内容其实一直没画上)。 修复:resolve 前先把内容复制到独立 canvas 副本再 dispose,保证合并时 拿到的是有效像素。深色主题下验证通过(深色背景+彩色内容均正常)。
This commit is contained in:
@@ -941,11 +941,18 @@ function generateCombine() {
|
|||||||
const chart = echarts.init(holder, null, { renderer: 'canvas' });
|
const chart = echarts.init(holder, null, { renderer: 'canvas' });
|
||||||
chart.setOption(option);
|
chart.setOption(option);
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
const cvs = holder.querySelector('canvas');
|
const srcCvs = holder.querySelector('canvas');
|
||||||
if (!cvs) { reject(new Error('子图渲染失败')); return; }
|
if (!srcCvs) { reject(new Error('子图渲染失败')); return; }
|
||||||
resolve(cvs);
|
// 关键:先把内容复制到独立 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();
|
chart.dispose();
|
||||||
holder.remove();
|
holder.remove();
|
||||||
|
resolve(copy);
|
||||||
}, 80);
|
}, 80);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user