echarts导出图片功能

第一种:采用echarts原生配置项

toolbox: {
	show: true,
	top: 9,
	right: 24,
	feature: {
	saveAsImage: {}
	}
},

第二种:手写导出按钮

导出按钮

<div ref="chart"> <div>/*echart图标*/
<botton @click="downloadFile">导出图片</botton>

data属性

data(){
return {
	chart: null //chart实例
	}
}

导出方法

** 在此不写echart报表生成方式,直接调用echart相关api **

downloadFile() {
	let aLink = document.createElement('a');
	let blob = this.base64ToBlob();
	let evt = document.createEvent('HTMLEvents');
	evt.initEvent('click', true, true); 
	aLink.download = this.option.title.text; //下载图片的名称
	aLink.href = URL.createObjectURL(blob);
	aLink.click();
}
exportImg() { //echart返回一个 base64 的 URL
	return this.chart.getDataURL({
		type: 'png',
		pixelRatio: 1,
		backgroundColor: '#fff'
		})
	},
base64ToBlob() { //将base64转换blob
	let img = this.exportImg();
	let parts = img.split(';base64,');
	let contentType = parts[0].split(':')[1];
	let raw = window.atob(parts[1]);
	let rawLength = raw.length;
	let uInt8Array = new Uint8Array(rawLength);
	for (let i = 0; i < rawLength; ++i) {
		uInt8Array[i] = raw.charCodeAt(i);
	}
	return new Blob([uInt8Array], { type: contentType });
},