最近的项目需要导出文件，导出的文件里有数据分析图，如折线图，柱状图，散点图等。综合考虑之后，我选择了目前已经很成熟的也很流行的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,
好啦，得到的图形可以正确显示啦。祝大家好运，不要遇到各种棘手的问题。
