在使用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();
}
}