JS（ 十五）自定义方式导出echarts图片

用法：

1、echartsContainer对应到echarts的容器id；
2、exportOut()绑定导出按钮即可。

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

2017.08.09下午更新

导出多张图片，利用canvas。同样在exportOut中调用drawOnCanvas(dataurl,dataurl1,dataurl2),其中括号中为三个dataurl值。

/**
* 将canvas画布导出为图片
*/
function canvasToImageIpal(type) {
var canvas = document.getElementById("canvasipal");
var imgdata = canvas.toDataURL(type);
var fixtype = function (type) {
type = type.toLocaleLowerCase().replace(/jpg/i, 'jpeg');
var r = type.match(/png|jpeg|bmp|gif/)[0];
return 'image/' + r;
}
imgdata = imgdata.replace(fixtype(type), 'image/octet-stream')
var saveFile = function (data, filename) {
var link = document.createElement('a');
link.href = data;
link.download = filename;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
link.dispatchEvent(event);
}
var filename = ccode + "展示" + '.' + type;
saveFile(imgdata, filename);
}
function drawOnCanvas(dataurl, dataurl1, dataurl2) {
var canvas = document.getElementById("canvasipal");
var Gc = canvas.getContext("2d");
var drawImg = new Image();
drawImg.src = dataurl;
drawImg.onload = function () {
draw(this);
};
function draw(obj) {
Gc.drawImage(obj, 0, 0, 600, 300);
};
var drawImg1 = new Image();
drawImg1.src = dataurl1;
drawImg1.onload = function () {
draw1(this);
};
function draw1(obj) {
Gc.drawImage(obj, 0, 300, 300, 300);
var type = 'png';
};
var drawImg2 = new Image();
drawImg2.src = dataurl2;
drawImg2.onload = function () {
draw2(this);
};
function draw2(obj) {
Gc.drawImage(obj, 300, 300, 300, 300);
var type = 'png';
canvasToImageIpal(type);
};
}

---------------------------------------------------------------------------------------------------------------------------------

2017.9.26更新

html中canvas定义：

<canvas id='canvasipal' width='600' height='600' style='display: none'></canvas>

导出按钮绑定函数：

function exportOut() {
var myCharts = echarts.init(document.getElementById('echartsContainer'));
var dataurl = myCharts.getDataURL();
var myCharts1 = echarts.init(document.getElementById('echartsContainer1'));
var dataurl1 = myCharts1.getDataURL();
var myCharts2 = echarts.init(document.getElementById('echartsContainer2'));
var dataurl2 = myCharts2.getDataURL();
drawOnCanvas(dataurl, dataurl1, dataurl2);
return;
}

说明：

1、canvas是定义在table中，默认是隐藏的。

2、导出按钮绑定函数中的id是echars容器对应div的id。

3、只兼容了chrome49以上高版本。