echarts统计图保存成图片,兼容IE

在使用echarts做统计表时,有用户需要将统计图下载成图片,使用echarts原来的按钮,发现在IE下没反应,而且在谷歌上需要点两次(第一次生成图片,第二次下载图片),于是上网搜了相关信息后,整合下,成了下面的代码.在本人的应用下,谷歌个IE都能下载

//注:使用[X]字段名[/X]并在事件规则中使用doc.s("字段名","数值")来动态修改报表数据

var myChart = echarts.init(document.getElementById('body'));

option = {

toolbox: {

show: true,

feature: {

//saveAsImage: {show: true}//框架自身的保存图片

myTool2:{//自定义按钮 danielinbiti,这里增加，selfbuttons可以随便取名字

show:true,//是否显示

title:'下载', //鼠标移动上去显示的文字

icon:"linkey/bpm/easyui/themes/icons/down.gif",

onclick:function() {//点击事件,这里的option1是chart的option信息

saveImg()

}

}

}

}

//其它配置

]

};

// 为echarts对象加载数据

myChart.setOption(option);

function saveImg() {

var url = myChart.getConnectedDataURL({

pixelRatio: 5, //导出的图片分辨率比率,默认是1

backgroundColor: '#fff', //图表背景色

excludeComponents: [ //保存图表时忽略的工具组件,默认忽略工具栏

'toolbox'

],

type: 'png' //图片类型支持png和jpeg

});

var type = 'png';

var name = myChart.getOption().title.text + '.' + type;

//IE

if(window.navigator.msSaveOrOpenBlob) {

var btstr = atob(url.split(",")[1]);

var n = btstr.length;

var u8arr = new Uint8Array(n);

while(n--) {

u8arr[n] = btstr.charCodeAt(n);

}

var blob = new Blob([u8arr]);

window.navigator.msSaveOrOpenBlob(blob, name);

}

//非IE

else {

var tempA = document.createElement("a");

tempA.download =name;

tempA.href = url;

document.body.appendChild(tempA);

tempA.click();

tempA.remove();

}

}