當前位置：
首頁 >
JS实现Echarts的图表保存为图片功能
發布時間：2025/3/21
53
豆豆
生活随笔
收集整理的這篇文章主要介紹了
JS实现Echarts的图表保存为图片功能
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 需求分析
- 開發準備
- 實現思路
- 效果圖
- 參考鏈接
需求分析
實際項目開發過程中經常會有圖表展示功能，同時為了滿足用戶需要，會附帶著圖表導出功能，主要形式就是保存為圖片。在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。接下來思路就有了。
實現思路
具體代碼：
<!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轉blobfunction 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>效果圖
參考鏈接
總結
以上是生活随笔為你收集整理的JS实现Echarts的图表保存为图片功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 隐藏滚动条，保留鼠标滚动效果
- 下一篇： 基于ArcGIS JS API 4.11