echarts图片的打印问题

echarts图片很方便也好用，但是最近项目里用到了打印功能，要把页面图表也打印出来。

神奇的是，一点打印，图表就不见了，找了一下原因，原来是因为echarts是动态渲染出来的。

有什么办法能解决呢，找了万能的度娘，终于还是解决的我的问题。

那就是在图表渲染完成后将图片导出，并将图片地址赋值给img标签，打印时就打印img就能打印出图表。

具体如下

echarts提供了一个finished来监测图表是否已经渲染完成，还提供了一个getDataURL方法来生成图表的图片data 64地址

/**
* id 显示地图的div的id
* rows 地图上的xy轴的数据
*/
function drawChart(id, rows, option) {option.series[0].data = rows;var chart = echarts.init(document.getElementById(id));chart.setOption(option);//图表渲染完成后导出成图片给img标签chart.on('finished',function(){var img=chart.getDataURL();$('#img'+id).attr('src',img);});
}

棒棒的。。问题都迎刃而解。。

echarts图片的打印问题相关推荐

echart freemarker 模板_SpringBoot集成Freemarker模板生成Echarts图片(三）
紧接着前面两篇,本篇采用Freemarker模板来生成Echarts图片. 一. 项目结构二. Freemarker模板 (1)柱状图 { "title": { "te ...
图像处理---《在图片上打印文字 FreeType库》
图像处理---<在图片上打印文字 FreeType库> 目的:想在处理之后的图像上打印输出结果. 方法: (1)只在图像上打印数字.字母的话: 1.Mat ...
html5自动打印图片,html2canvas生成清晰的图片实现打印代码示例
本篇文章小编给大家分享一下html2canvas生成清晰的图片实现打印代码示例,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 基本用法处理模糊问题细节问题-压缩base ...
改变elementui卡片crad样式_Ueditor文字和echarts图片生成 word 前端解决方案
编程就像搭积木,少了任何一个就拼接不起来,所有积木都找到就只剩下调试. 一.echarts 获取图片方法getDataURL var element = document.getElementByI ...
word文档的生成以及echarts图片的插入
word文档的生成以及echarts图片的插入 word文档的生成 pom.xml引入代码流程-easy result 结语 word文档的生成上一篇博客我们提到了echarts图片的生成过程!现 ...
C++ 在图片上打印文字并保存图片
int score_record(IplImage* image, string scoreNum, float score ) {CvFont font; //传值给cvPutText()的CvFo ...
echarts图片上加上自定义文字或其它下载
想要下载echarts的图片,并且想在图片上加上一条条件之类的文字. 1.在echarts的自定义一个方法,下载前设置 graphic 属性,下载后再去掉属性(应该可以行通): 2.获取到你的echa ...
excel表在html显示图片,html背景图片不显示!如何在Excel里插入背景图片？背景图片可以打印出来吗？...
EXCEL窗体无法插入背景图片,为什么?如图: 设置用户窗体的picture属性,可以使用的图片文件格式有bmp,gif,jpg等.不支持png或tif图片. excel工作表背景设置图片后,打印不显 ...
二维码中加图片（打印带图片的二维码）
在二维码中,放入图片,遮挡一部分是被允许的. 二维码在少许损伤的情况下还可以读取出来,图片可以放置的位置如图的黄色区域.(具体可以放多大要看二维码生成时的纠错能力) 二维码的纠错级别: 纠错级别越高, ...

echarts图片的打印问题

echarts图片的打印问题相关推荐

最新文章

热门文章