ECharts导出word 图表模糊失真

最新推荐文章于 2024-02-27 14:39:13 发布
VIP文章 最新推荐文章于 2024-02-27 14:39:13 发布
阅读量2.4k 收藏
点赞数
原文链接：http://www.cnblogs.com/boshow/p/9862064.html
版权

在项目中会有这样的需求，echars生成图表导入到word中

在项目中用的插件

博主有一篇文章将的是  vue使用jquery的三方插件jquery.wordexport.js  

https://blog.csdn.net/sinat_37984999/article/details/81164818

 

这样就可以在vue中使用导出jquery.wordexport的方法了

用这个插件很方便导出了图表，下面页面是这样的，第一个图是echarts的图表，第二个图是根据base64生成的img图片，第三个图就是一个普通的图片

 

我将echarts自带的 getDataURL() 方法获取base64的url，赋值给页面上的img 。如果直接下载下载出来的图片是模糊的

先上个代

最低0.47元/天 解锁文章
詹小布
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts图表导出excel示例
09-04
主要介绍了echarts图表导出excel示例,需要的朋友可以参考下
解决前端word导出echarts图片模糊的两种方法
wx258852的博客
07-26 767
导出清晰的图片超出了word的边缘是为什么？
Echarts 学习笔记 - 解决图表转图片时文字模糊的问题
湖边的小屋圣迹
08-22 1478
注意所引用的 echarts 版本是否完整。一开始用定制版本，估计是没有带这部分功能。后来换了完整版才有效 /** * 图表转图片 * @param chart 图表实例 */ function chart2image(chart){ var image = new Image(); image.setAttribute("crossOrigin",'Anonymous'); image.setAttribute("width",'100%'); image.src = ch
echarts中图表不清晰
最新发布
weixin_53125679的博客
02-27 437
参考：https://echarts.apache.org/zh/api.html#echarts.init。方法2：仍然使用canvas渲染，通过调整devicePixelRatio提升清晰度。方法1：使用svg渲染，svg渲染出的图表的清晰度高于canvas。提升清晰度（vue-echarts插件）：仍然使用canvas渲染，通过调整。
ECharts大屏失帧如何解决
qq_53818683的博客
04-19 602
浏览器兼容性问题：不同浏览器可能对 CSS 和 HTML 标准有不同的解释，这可能导致图表失真。解决方法是检查浏览器兼容性，并使用相应的解决方案。图表配置错误：ECharts 提供了很多配置项，如果配置错误可能导致图表失真。解决方法是仔细检查配置项并确保它们正确地设置了。元素缩放：如果元素被放大或缩小了，可能会导致图表失真。分辨率不匹配：大屏分辨率与实际分辨率不匹配，导致图表显示失真。图表数据异常：如果数据异常可能导致图表失真。总之，要解决 ECharts 大屏失真问题，需要仔细检查以上因素，并逐一解决。
VUE 中 Echarts保存图表图片，保证图片不模糊
sunshineTing2的博客
05-07 892
自定义echarts的下载事件 （按钮 + 事件） <a :href="chartImgUrl" download="echart.png" @click="handleChartDownload"> 下载 </a> handleChartDownload() { let myChart = this.$echarts.init(this.$refs.circleChart) let that = this setTimeout(function() {
echarts图表导出到excel
12-19
echarts图表导出到excel中的解决方法，做个备忘录，以防忘记
C#导出WORD动态图表
03-24
ASP.net(C#)用DocX操作Word文件生成图表。
java 前台数据和echarts图表导出为word文件的jar
03-27
stax-api-1.0.1.jar xmlbeans-2.4.0.jar ooxml-schemas-1.0.jar 这三个主要是java导出为word文件的jar包
echart图表导出到word文档
07-19
poi 将echar报表生成到word中，通过base64格式把图表信息传到后台，后台自动生成word文档，当然可以根据模板自动填充数据，这个小案例只是根据自己需要生成文档，根据自定义模板再拼接自定义内容也有，需要的联系我...
【已解决】vue下载PDF，echarts图模糊问题
@point
11-30 523
let myChart = this.$echarts.init(this.$refs["preMyChart"], null, { renderer: "svg", }); 需要设置成“svg” just so so
解决echarts 在缩放中模糊的问题
HYeeee的博客
05-04 2702
1、使用方式一 { renderer : ‘svg’} 可以解决放大文字模糊的问题，但如果使用domtoimg插件截图，dom显示正常的情况下，截出的图片会出现文字放大、tooltip文字重叠的问题。2、使用方式二不会出现放大问题，但截图结果比dom显示的文字要模糊，只能将devicePixelRatio设置调大来处理，但显示效果没有renderer : 'svg’好，肉眼可见的感觉有锯齿。在我们的示例中，legent字体设置的是10px，外部通过scale实现放大1.25倍，最终得到字体12px的效果。
echarts导出的图片变形_代码详解——MATLAB出图：导出高清图
weixin_30737431的博客
12-04 320
生成Figure图片以后，怎么导出可以插入论文的高清图片？一些同学会用截屏的方式复制图片，但是这样的图片真心丑爆了。一种简单易行的方案是使用Figure窗口的导出功能。在属性“大小”中，可以设置图片的宽度和高度，建议论文中需要多大的图片，这里就设置多大的数值(将框中的“自动”改为需要的数值)，尽量不要在文档中通过拉伸等方式调整图片的大小(可能会导致图中的文字、曲线变形)。“渲染”这部分，...
关于echarts导出图片分辨率问题
积一时之步，臻千里之遥程
12-23 3259
可以在 toolbox 中写下面的参数 toolbox: { show : true, feature : { dataView : {show: true}, restore : {show: true}, saveAsImage : { pixelRatio: 15} //值越大分辨率越高 } },
Word中的图片保存后变模糊（失真）的问题的有效解决方案
热门推荐
Wendy的博客
01-01 8万+
目录一、问题描述二、解决方案 一、问题描述 在Word中插入一张图片，将图片进行适度操作（如裁剪、放缩等），然后点击保存按钮，画面就会出现失真，下图中左图和右图分别表示原始图像和放缩后的图像： 可以看到，放缩后的图像有明显的失真（变模糊），下面用一组动图来具体表现一下失真现象，注意：这里的图片是在word文档里进行处理，首先进行缩小，缩小后点击保存，然后放大，每次操作完后点击保存，然后图像变得越来越模糊，gif如下： 二、解决方案 造成该问题的主要原因是Word开启了默认自动压缩图片。 点击Word左上
解决echart图例导出成word文档存在的问题
月来better
12-25 666
echart图例导出成word文档，在word文档中会出现echart展示不出来的情况，那么就需要前后端配合解决这个问题。我们项目开发工具是用的Idea，前端需要将echarts图例中的base64的路径信息传给后端，后端再将其存储到其target/static目录资源下，然后根据后端返回的图片信息将其拼接挂在img的src下，此刻在word文档上看到其实是一个echarts图例转换成的图片展示的 <!-- echarts实例 --> <div id="echartOne"> &lt
poi导出word图表数据
04-27
您可以通过Apache POI提供的XWPFChart类来获取Word文档中图表的数据。下面是一个简单的示例代码，其中chartIndex是图表在文档中的索引： ``` XWPFChart chart = document.getCharts().get(chartIndex); List...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值