需求分析
實際項目開發過程中經常會有圖表展示功能,同時爲了滿足用戶需要,會附帶着圖表導出功能,主要形式就是保存爲圖片。在Echarts中本身就提供這種配置項,使用起來簡單方便。但是,需求分析師要求必須有一個圖表導出功能按鈕,以便與整體樣式風格相搭,對於這種要求。。。
開發準備
通過查看Echarts網站,可以很快找到其自帶的toolbox
配置項,在feature
裏面有一個saveAsImage
,效果大概是下圖:
部分代碼:
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
toolbox: {
show: true,
feature: {
saveAsImage: {}
}
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
另外Echarts提供一個接口getDataURL
,通過它可以導出圖表圖片,返回一個 base64 的 URL。接下來思路就有了。
實現思路
- 通過
getDataURL()
獲取圖片的base64編碼字符; - 字符解碼,並轉換成Blob對象;
- 通過Blob對象創建
URL
對象; - 利用
<a>
觸發下載操作;
具體代碼:
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<title>JS實現Echarts的圖表保存爲圖片功能</title>
</head>
<body style="height: 100%; margin: 0">
<input type="button" value="導出" onclick="saveAsImage()"/>
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
// toolbox: {
// show: true,
// feature: {
// saveAsImage: {}
// }
// },
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
console.log(myChart.getDataURL());
//base64轉blob
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 });
}
function saveAsImage() {
let content = myChart.getDataURL();
let aLink = document.createElement('a');
let blob = this.base64ToBlob(content);
let evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true);
aLink.download = "line.png";
aLink.href = URL.createObjectURL(blob);
aLink.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));
}
</script>
</body>
</html>