解决 echarts 打印不显示的问题

最新推荐文章于 2024-06-10 16:43:59 发布

Susan说

最新推荐文章于 2024-06-10 16:43:59 发布

阅读量864

点赞数

分类专栏：前端文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/Tose_/article/details/121144227

版权

这篇博客主要探讨了Echarts图表在打印时无法显示的常见问题，并提供了一个完整的解决方案。作者指出，关键在于将'myCharts.on('finished', function ()}'函数放在'setOption'下方，并通过调整img标签和Echarts图表div容器的显示状态来确保图表能正确转换为图片并进行打印。" 108073277,8753346,最大食物链计数问题解析与算法实现,"['图算法', '拓扑排序', '数学', '计算复杂性']

摘要由CSDN通过智能技术生成

关于echarts图表打印不显示的问题，搜遍了度娘…记录一个完整的解决方案

此代码是存放将图表转换成图片存放在img标签中

<img src="" alt="" id="pchart" style="display: none;">
<div id="tjDivDay" style="height: 600px;"></div>

用于图表生成

var myCharts1 = echarts.init(document.getElementById(

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Susan说

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

解决echarts图形由于label过长导致文字显示不全问题

奔跑的痕迹的博客

09-26

2万+

使用echarts 打印饼图，在pc没问题，但一到移动端问题就来了，由于屏幕过小，导致label部分被遮挡一、问题分析如上图这个就尴尬了，囧么办呢？还好echarts 提供了formatter方法二、修改前代码块 series: [ { name: seriesName || '数据来源', type: 'pie', ...

echart报表加打印

12-27

简单的报表（echart）小demo，外加打印功能

参与评论您还未登录，请先登录后发表或查看评论

【前端】使用window.print() 前端实现网页打印详细教程（含代码示例）

最新发布

06-10

1万+

【前端】使用window.print() 前端实现网页打印详细教程（含代码示例）

vue项目中遇到的打印，以及处理重新排版后不显示echarts图片问题。

spt_dream的博客

03-27

785

1. 项目中用到的打印页面： css: 控制好宽度一般A4 我调试的是794px多了放不下，小了填不满。当时多页打印的时候，一定要控制好每一个页面内容显示的高度不要超过一个页面，当然根据自己项目来。由于我的项目是每一个页面固定一个页尾部，所以当显示的时候正常排版显示。但是一旦点击了打印预览需要修改这个区域的css让他固定在每一个页面的底部。 js代码，点击打印后执行(如果...

echarts控制台打印有数据，但是图显示不出来

weixin_43833610的博客

04-06

6059

原因：axios的异步问题，解决方法：必须先获取到数据再进行画图解决部分代码： this.getRes().then(res=>{ // console.log(res) if(res.code==200){ this.factorRes = res.data.data.factorRes; this.factorRes.f

echarts图片的打印问题

那记忆搁浅的博客

06-13

4349

echarts图片很方便也好用，但是最近项目里用到了打印功能，要把页面图表也打印出来。神奇的是，一点打印，图表就不见了，找了一下原因，原来是因为echarts是动态渲染出来的。有什么办法能解决呢，找了万能的度娘，终于还是解决的我的问题。那就是在图表渲染完成后将图片导出，并将图片地址赋值给img标签，打印时就打印img就能打印出图表。具体如下 echarts提供了一个finishe...

vue打印功能遇到的问题（2）canvas不可打印问题

E.N.Edward

12-25

1321

创建一个print.js文件然后直接在main中引入注册使用就好了在自己要用的页面中就直接给需要打印的模块加上ref=“print”,如果里面有自己不想打印的模块，给个class=“no-print” 下面这些代码是我已经处理过的打印，可以打印出来canvas 已经处理了。 // 打印类属性、方法定义 /* eslint-disable */ const Print = funct...

听说你的echarts图无法展示出来？

weixin_52236586的博客

04-29

951

原因：methods中的方法是无法保证顺序的，通常是因为你的数据没获取到，echarts就开始渲染了、这个时候是无法渲染出来的，并且不会报错。如果想要正常渲染echarts，请找promise大哥、案例如下。

关于mockjs+echarts图表不显示问题

weixin_58896221的博客

07-19

351

刚开始吧所有的数据都写一个接口里面，然后自己写的表格，循环都没问题，然后吧echarts的数据放进去否图表显示为空，就是什么都不显示。主要原因就是我的页面向服务端发送请求，页面不等服务器响应就已经渲染图表，尽管后面数据请求成功但此时页面已经渲染完成，所以图表显示为空，不会显示数据。这样就可以了，关于mockjs就是在写一个接口返回echarts数据，也可以用同一个吧，没用过，感觉很别扭。异步请求，客户端向服务端发送请求，客户端不等服务端响应就进行一个页面的渲染。...

解决使用printJS打印PDF时echarts图表无法打印的问题

zch的博客

12-28

1998

一次项目中有前端打印PDF的需求，在网上找到printJS使用，发现canvas无法打印，就将其代码稍加改造，完美解决。使用方法：由于是VUE项目，直接注册到了全局页面内使用：在printjs文件内写死了容器ID为 details 一下是完整printJS代码 // 打印类属性、方法定义 /* eslint-disable */ const Print = function (dom, options) { if (!(this instanceof Print)) return ne

python echarts 地图_python调用pyecharts不显示地图解决办法

weixin_39800957的博客

12-18

1727

一、基本步骤 (仅看此基本步骤就能解决问题---如果看这个还不能解决，放弃吧，何必为难自己！！！)当你用到pyecharts的Map等地图包的时候就需要手动安装下面的包，可以全部下，也可以挑自己需要用到的下安装下列地图数据包pip install echarts-countries-pypkgpip install echarts-china-provinces-pypkgpip install ...

.net C# 前端使用 echarts图表不显示的问题

janny_flower的博客

08-24

2176

今天在开发的时候，出现了这样的问题，如下如：然后我就开始排查问题： 1.确认数据源是否正确 2.echarts使用方法是否正确（当然这个方法我是很确定的，因为只有在标签切换的时候才会出现这样的问题） 3.在多种加载方式中，查看该情况下的区别，然后终于找到了问题原因，希望能解决你的问题。 echarts的原理其实是对应的包装了使用了canvas画布,F12打开调试页面，看最终生成...

echarts图表中的点、柱形或者折线显示不出来，但是有数据的问题解决（另附后台返回数据实例代码）

热门推荐

qq_33142257的博客

11-21

1万+

目前我遇到的暂时有两种情况，一个是版本，一个是require时候配置问题；版本可以理解，因为引用的echarts.js版本比价低，导致我所画的图出不来；后来换了最新版本的js就好了，直接取官网下载就行；第二种情况是我对这个api根本不熟悉，只为了完成任务，也没认真看； require.config({ paths : { 'ec

echarts图表显示异常

鸣的博客

04-02

1918

1.比如图形突然右移等等原因，在渲染前清除调原来的图表数据 myChart1.clear(); 这样就显示正常。

ECharts在Vue中实现打印功能

qq_43251032的博客

09-24

2296

前言：在Vue中利用自带的页面打印是打印不出ECharts图表的，原因是获取不到ECharts插件的css节点。打印出来的结果会是空白。经过参考了网上的多篇文档，总结步骤阐述了一下，希望为大家提供一点小小帮助。 1.在Vue项目中某个文件夹下创建一个print.js的文件，文件内容为： // 打印类属性、方法定义 /* eslint-disable */ const Print = functio...

多个页面使用echarts图表，出现部分图表内容不显示问题

知所云

07-22

3190

最近开发一个项目，主要是对数据进行图表展示，之前用echarts 也就一两个页面会用，这次是十几个页面都有要用图表，多多少少，开发的过程中出现了一些bug（emmm。。。。）其中就遇到一个问题，多个页面，点击其他页面这个页面的数据就能展示，但是点击另一个页面的时候，报表就显示不出来了，当时找了另一个前端一起看，研究半天没找到问题（只能说我俩当时都没有想到id名上去，因为想着vue单页面随着路由切换应该互不影响的），可是这个图表还真是相互影响的，如果绘制图表的div的id名称是一摸一样的两个页面就会出现点击一

vue打印echarts

qq_38101304的博客

04-23

2910

vue打印echarts

echarts markline有时不显示

06-08

Echarts markline 有时不显示的原因可能有以下几种： 1. markline 配置项中的 `data` 数据格式不正确或者数据为空，导致 markline 无法显示。可以通过在控制台打印数据来检查数据是否正确。 2. markline 显示的...