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();

	}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值