當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

JS实现Echarts的图表保存为图片功能

發(fā)布時(shí)間：2025/3/21 javascript 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS实现Echarts的图表保存为图片功能小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

文章目錄

需求分析
開(kāi)發(fā)準(zhǔn)備
實(shí)現(xiàn)思路
效果圖
參考鏈接

需求分析

實(shí)際項(xiàng)目開(kāi)發(fā)過(guò)程中經(jīng)常會(huì)有圖表展示功能，同時(shí)為了滿足用戶需要，會(huì)附帶著圖表導(dǎo)出功能，主要形式就是保存為圖片。在Echarts中本身就提供這種配置項(xiàng)，使用起來(lái)簡(jiǎn)單方便。但是，需求分析師要求必須有一個(gè)圖表導(dǎo)出功能按鈕，以便與整體樣式風(fēng)格相搭，對(duì)于這種要求。。。

開(kāi)發(fā)準(zhǔn)備

通過(guò)查看Echarts網(wǎng)站，可以很快找到其自帶的toolbox配置項(xiàng)，在feature里面有一個(gè)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提供一個(gè)接口getDataURL,通過(guò)它可以導(dǎo)出圖表圖片，返回一個(gè) base64 的 URL。接下來(lái)思路就有了。

實(shí)現(xiàn)思路

通過(guò)getDataURL()獲取圖片的base64編碼字符；

字符解碼，并轉(zhuǎn)換成Blob對(duì)象；

通過(guò)Blob對(duì)象創(chuàng)建URL對(duì)象；

利用<a>觸發(fā)下載操作；

具體代碼：

<!DOCTYPE html> <html style="height: 100%"><head><meta charset="utf-8"><title>JS實(shí)現(xiàn)Echarts的圖表保存為圖片功能</title> </head><body style="height: 100%; margin: 0"><input type="button" value="導(dǎo)出" 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轉(zhuǎn)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>

效果圖

參考鏈接

一篇文章徹底弄懂Base64編碼原理

js下載base64格式的圖片

總結(jié)

以上是生活随笔為你收集整理的JS实现Echarts的图表保存为图片功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。