最近的項目需要導(dǎo)出文件，導(dǎo)出的文件里有數(shù)據(jù)分析圖碉输，如折線圖，柱狀圖亭珍，散點圖等敷钾。綜合考慮之后，我選擇了目前已經(jīng)很成熟的也很流行的ECharts庫肄梨。
ECharts一個純 Javascript 的圖表庫阻荒，它提供了繪制各種圖形的方法方法，幾乎囊括了所有的二維圖形众羡，用起來也很是方便侨赡。還提供了圖片下載的功能。這里我們主要說的是圖片下載粱侣。下面是我找到的一些方法總結(jié)以及它們的適用情況羊壹。
1.用ECharts配置項手冊中的toolbox.feature.saveAsImage
因為是自帶的，不需要怎么處理齐婴，直接用就好油猫。示例：
toolbox: {
show: true,
feature: {
saveAsImage: {
show:true,
excludeComponents :['toolbox'],
pixelRatio: 2
}
}
}
這一段一定要寫在option中，這樣會在圖形右上角產(chǎn)生一個保存為圖片的標(biāo)識柠偶，點擊即可下載圖片情妖，這種方法試用于網(wǎng)站點擊保存的需求，效果如下圖：
2.用ECharts實例方法getImage
需要注意的是诱担，這個功能在ECharts3中好像已經(jīng)舍棄鲫售，作者用ECharts3沒有出現(xiàn)任何效果，換成ECharts2的js文件才可以運行该肴。示例：
myChart.setOption(option);
var picInfo = myChart.getImage();
getImage要放在setOption方法生成一個簡單的圖形之后情竹，我們怎么驗證getImage是否生效了呢？
方法a：萬能的alert調(diào)試，這里 alert (picInfo); 的結(jié)果彈出的是[object HTMLImageElement]秦效，我們?nèi)匀徊恢肋@里的對象是什么雏蛮。
方法b：頁面中新定義一個容器，將得到的picInfo寫入div阱州，看看是什么結(jié)果：
var picInfo = myChart.getImage();
onload=function f(){
document.getElementById("pic").appendChild(picInfo);
//document.getElementById("pic").innerHTML = picInfo;
}
注意挑秉，這里的寫入div，要用上面的方法寫入上面定義的div苔货。得到如下圖所示：
如果用下面的方法寫入犀概，會在定義的div中出現(xiàn)[object HTMLImageElement]，如下圖：
遺憾的是夜惭，這種方法得到的picInfo為[object HTMLImageElement]姻灶，無法通過Ajax傳遞到后臺處理，只能用于顯示诈茧。因此产喉，這種方法適用于一些網(wǎng)站繪制圖形上下或者左右同步顯示的需求。
3.用ECharts實例方法getDataURL
很顯然敢会，上面的兩種情況并不能滿足我現(xiàn)在圖片自動保存的需求曾沈，下面說我最后解決方案。
首先鸥昏，我們用getDataURL得到圖片信息：
myChart.setOption(option);
var picInfo = myChart.getDataURL();
getDataURL仍然要放在setOption方法生成一個簡單的圖形之后塞俱，現(xiàn)在我們得到的picInfo是一串base64信息，我們設(shè)法將得到的picInfo用Ajax傳遞到后臺處理吏垮，作者用的是php障涯，因此，以php處理為例：
新建一個文件惫皱，取名test.php像樊，（請把此文件放在可運行的環(huán)境里尤莺，這是基礎(chǔ)）旅敷。在php文件中將繪制圖形的html文件include進來，接收html中Ajax傳遞到后臺的信息颤霎，將base64轉(zhuǎn)化為圖片保存媳谁。
先判斷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接收數(shù)據(jù)并處理：
<?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方法锤躁，看到一個空的坐標(biāo)軸，那么可能是動畫效果產(chǎn)生的后果或详，animation決定是否開啟動畫系羞，關(guān)閉即可郭计，在option中加入：
animation : false,
好啦，得到的圖形可以正確顯示啦椒振。祝大家好運昭伸，不要遇到各種棘手的問題。
