系统之家 - 玩系统我们是专业的!
最新更新 系统重装教程(一看就会视频+图文版)
当前位置: 系统之家 > 系统教程 > 软件教程 > ECharts怎么打印数据

ECharts怎么打印数据

更新日期:2022-11-29 06:39:04

来源:互联网

手机扫码继续观看

echarts是一个第三方的图图表控件,可以按照你的数据制作出很多不同类型的图表,更直观的感受到数据变化,有些用户需要把图标打印下来,那么该怎么设置打印呢,接下来一起来看看吧。

ECharts怎么打印数据

一、 首先我们要做的,就是在Echarts图标上方定义一个img

1 <!--startprint-->
2 <img src="" id="printImg" style="height: 50%;width:90%;display: none;" />
3 <!--endprint-->

二、然后第二步,我们要创建一个用来打印的按钮。

1 <button id="print" text="打印图表" img="WEB-CORE/images/gif/Export.gif" action="PrintImage()" />

三、接下来,我们只需要定义打印函数就可以了,现在就把相关函数代码放在下面,可以自取哦。

 1 function PrintImage() {
 2 // 把echarts图片转成64编码的图片
 3 var img = new Image();
 4 var imgSrc = myChart.getDataURL();
 5 // 渲染到图表上面展示
 6 $("#printImg").attr("src", imgSrc).show();
 7 //这里要使用延时加载,才不会在图片还没渲染出来的时候就调用打印的方法
 8 setTimeout(function() {
 9 //直接调用浏览器打印功能
10 bdhtml = window.document.body.innerHTML;
11 //定义打印区域起始字符,根据这个截取网页局部内容
12 sprnstr = "<!--startprint-->"; //打印区域开始的标记
13 eprnstr = "<!--endprint-->"; //打印区域结束的标记
14 prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);
15 prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
16 //还原网页内容
17 window.document.body.innerHTML = prnhtml;
18 //开始打印
19 window.print();
20 }, 1000);
21 
22 }

相关阅读:怎么在pycharm中运行

该文章是否有帮助到您?

帮助

0

帮助

0
热门问题排行榜
系统下载排行

系统合集
软件合集 更多
安卓下载 更多