最近的項目需要導出文件，導出的文件里有數據分析圖，如折線圖，柱狀圖，散點圖等。綜合考慮之后，我選擇了目前已經很成熟的也很流行的ECharts庫。
ECharts一個純 Javascript 的圖表庫，它提供了繪制各種圖形的方法方法，幾乎囊括了所有的二維圖形，用起來也很是方便。還提供了圖片下載的功能。這里我們主要說的是圖片下載。下面是我找到的一些方法總結以及它們的適用情況。
1.用ECharts配置項手冊中的toolbox.feature.saveAsImage
因為是自帶的，不需要怎么處理，直接用就好。示例：
toolbox: {
show: true,
feature: {
saveAsImage: {
show:true,
excludeComponents :['toolbox'],
pixelRatio: 2
}
}
}
這一段一定要寫在option中，這樣會在圖形右上角產生一個保存為圖片的標識，點擊即可下載圖片，這種方法試用于網站點擊保存的需求，效果如下圖：
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。得到如下圖所示：
如果用下面的方法寫入，會在定義的div中出現[object HTMLImageElement]，如下圖：
遺憾的是，這種方法得到的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,
好啦，得到的圖形可以正確顯示啦。祝大家好運，不要遇到各種棘手的問題。
