echarts 放在swiper里面开启loop循环轮播时会出现第一个图表丢失现象,大概是克隆div的时候导致dom元素和图表对象失联。网查了一下问问题的很多回答的太少,后经老板提醒使用生成图片的方法搞定,需要注意的前提是图表上没有具体的鼠标事件。
/**
* 从一个绘制好的echarts图表(visibility: hidden;)元素生成图片载入到目标元素中
*
@param fromId 图表元素id
*
@param toId 目标元素id
*
@param delayTime 延迟时间,为了避免动画带来的绘制未完成就转成图片的问题
* 可关闭动画:option:{animation:false,}
*/
let paintEchartsImg = (fromId, toId, delayTime = 1000) => {
let $fromId = $("
#" + fromId);
//将第一个画布作为基准。
let baseCanvas = $fromId.find("canvas").first()[0];
if (!baseCanvas) {
return false;
}
let [width,height] = [baseCanvas.width,baseCanvas.height];
let ctx = baseCanvas.getContext("2d");
//遍历,将后续的画布添加到在第一个上
$fromId.find("canvas").each(function (i, canvasObj) {
if (i > 0) {
let canvasTmp = $(canvasObj)[0];
ctx.drawImage(canvasTmp, 0, 0, width, height);
}
});
//获取base64位的url
let base64URL = baseCanvas.toDataURL();
setTimeout(function () {
$("#" + toId).css({
background: `url("${base64URL}")`
, backgroundSize: 'contain'
})
}, delayTime)
};