ECharts 图表导出

最新推荐文章于 2025-04-14 21:05:16 发布

叛逆的鲁鲁修love CC

最新推荐文章于 2025-04-14 21:05:16 发布

阅读量979

点赞数 2

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/zhang1f/p/11093779.html

版权

本文介绍了如何在前端使用ECharts将图表导出为图像，包括使用ECharts配置项toolbox.feature.saveAsImage、getImage和getDataURL方法。特别提到getDataURL方法可以实现图片自动保存。同时，文章提及在ECharts3中某些方法可能不适用，建议使用ECharts2。此外，还提到了两种后台保存图片的方法，分别引用了Microsoft .NET Framework的Image.Save方法和一篇简书文章中的教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Echarts图形是由Javascript亲自在前端网页上绘制的

1.用ECharts配置项手册中的toolbox.feature.saveAsImage

toolbox: {
　　show: true,
　　feature: {
　　　　saveAsImage: {
　　　　show:true,
　　　　excludeComponents :['toolbox'],
　　　　pixelRatio: 2
　　　　}
　　}
}
//写在option中，这样会在图形右上角产生一个保存为图片的标识，点击即可下载图片，这种方法试用于网站点击保存的需求

2.用ECharts实例方法getImage（这种方法得到的picInfo为[object HTMLImageElement]，无法通过Ajax传递到后台处理，只能用于显示）

这个功能在ECharts3中好像已经舍弃，作者用ECharts3没有出现任何效果，换成ECharts2的js文件才可以运行

myChart.setOption(option);
var picInfo = myChart.getImage();

最低0.47元/天解锁文章