1、ECharts自帶導出功能
設置工具欄屬性,saveAsImage即可出現下載圖標,點擊下載爲png圖片
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
2、JS方式
官網API說明:https://echarts.apache.org/zh/api.html#echartsInstance.getDataURL
上js:
說明:按照官網說明、個人也試了下,通過getDataURL獲取圖片Base64信息後,不需要再轉Blob
一開始下載的圖片沒有底色,後來看了下官網說明,給getDataURL添加參數後,即可設置底色。
var task_year_chart = document.getElementById('task_year_chart');
function downLoad() {
//var picBase64Info = echarts.init(task_year_chart).getDataURL();
//alert(picBase64Info);
let content = echarts.init(task_year_chart).getDataURL({'backgroundColor':'#fff'});
let aLink = document.createElement('a');
//let blob = this.base64ToBlob(content);
let evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true);
aLink.download = "導出.png";
aLink.href = content;
aLink.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));
}
function base64ToBlob(code) {
let parts = code.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 });
}