ECharts绘制的图形保存为图片

最近的项目需要导出文件，导出的文件里有数据分析图，如折线图，柱状图，散点图等。综合考虑之后，我选择了目前已经很成熟的也很流行的ECharts库。

ECharts一个纯 Javascript 的图表库，它提供了绘制各种图形的方法方法，几乎囊括了所有的二维图形，用起来也很是方便。还提供了图片下载的功能。这里我们主要说的是图片下载。下面是我找到的一些方法总结以及它们的适用情况。

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

因为是自带的，不需要怎么处理，直接用就好。示例：

toolbox: {

　　show: true,

　　feature: {

　　　　saveAsImage: {

　　　　show:true,

　　　　excludeComponents :['toolbox'],

　　　　pixelRatio: 2

　　　　}

　　}

}

这一段一定要写在option中，这样会在图形右上角产生一个保存为图片的标识，点击即可下载图片，这种方法试用于网站点击保存的需求，效果如下图：

saveAsImage测试效果图

2.用ECharts实例方法getImage

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

myChart.setOption(option);

var picInfo = myChart.getImage();

getImage要放在setOption方法生成一个简单的图形之后，我们怎么验证getImage是否生效了呢？

方法a：万能的alert调试，这里 alert (picInfo); 的结果弹出的是[object HTMLImageElement]，我们仍然不知道这里的对象是什么。

方法b：页面中新定义一个容器，将得到的picInfo写入div，看看是什么结果：

var picInfo = myChart.getImage();

οnlοad=function f(){

　　document.getElementById("pic").appendChild(picInfo);

　　//document.getElementById("pic").innerHTML = picInfo;

}

注意，这里的写入div，要用上面的方法写入上面定义的div。得到如下图所示：

getImage得到的对象写入div

如果用下面的方法写入，会在定义的div中出现[object HTMLImageElement]，如下图：

getImage得到的对象普通写入

遗憾的是，这种方法得到的picInfo为[object HTMLImageElement]，无法通过Ajax传递到后台处理，只能用于显示。因此，这种方法适用于一些网站绘制图形上下或者左右同步显示的需求。

3.用ECharts实例方法getDataURL

很显然，上面的两种情况并不能满足我现在图片自动保存的需求，下面说我最后解决方案。

首先，我们用getDataURL得到图片信息：

myChart.setOption(option);

var picInfo = myChart.getDataURL();

getDataURL仍然要放在setOption方法生成一个简单的图形之后，现在我们得到的picInfo是一串base64信息，我们设法将得到的picInfo用Ajax传递到后台处理，

如果你在测试的时候用了getDataURL方法，看到一个空的坐标轴，那么可能是动画效果产生的后果，animation决定是否开启动画，关闭即可，在option中加入：

animation : false,

好啦，得到的图形可以正确显示啦。祝大家好运，不要遇到各种棘手的问题。