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,

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