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)
};
欢迎新用户
o p

正在加载,请稍候...

 

  • ü 未年审 审核时间 2014-08-01
  • Ü 简介: 物以类聚,人以群分,愿与志同道合者为友,共同努力!
更多 a
277关注 334粉丝 1364微博