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();
onload=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传递到后台处理，作者用的是php，因此，以php处理为例：
新建一个文件，取名test.php，（请把此文件放在可运行的环境里，这是基础）。在php文件中将绘制图形的html文件include进来，接收html中Ajax传递到后台的信息，将base64转化为图片保存。
先判断picInfo是否存在，存在则传递到后台，代码如下：
if(picInfo){
$.ajax({
type: "post",
data: {
baseimg: picInfo
},
url: 'test.php?action=save',
async: true,
success: function(data) {
console.log(picInfo);
},
error: function(err){
console.log('图片保存失败');
alert('图片保存失败');
}
});
}
test.php接收数据并处理：
<?php
include("test.html");
if($action = "save"){
$picInfo = $_POST['baseimg'];
$streamFileRand = date('YmdHis').rand(1000,9999); //图片名
$picType ='.png';//图片后缀
$streamFilename = "/www/echarts/".$streamFileRand .$picType; //图片保存地址
preg_match('/(?<=base64,)[\S|\s]+/',$picInfo,$picInfoW);//处理base64文本
file_put_contents($streamFilename,base64_decode($picInfoW[0]));//文件写入
}
OK，成功保存图片到自己想要的位置。还有一点，如果你在测试的时候用了getDataURL方法，看到一个空的坐标轴，那么可能是动画效果产生的后果，animation决定是否开启动画，关闭即可，在option中加入：
animation : false,
好啦，得到的图形可以正确显示啦。祝大家好运，不要遇到各种棘手的问题。
