需求分析

实际项目开发过程中经常会有图表展示功能，同时为了满足用户需要，会附带着图表导出功能，主要形式就是保存为图片。在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转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格式的图片

JS实现Echarts的图表保存为图片功能相关推荐

将Echarts图表保存为图片【使用自定义下载按钮，不用Echarts自带下载功能】
因为前端UI设计的Echarts图表的下载按钮是自定义的,但是Echarts自带工具栏的图表下载按钮是固定的不能改变,所以我们需要另写一个方法: 具体做法如下: 1.首先创建一个div来展示我们的Ec ...
把 Rational Rose 的图表保存为图片文件
原文连接:https://blog.csdn.net/xiaobing_122613/article/details/56485456 -------------------------------- ...
【微信小程序】实现手写电子签名并保存为图片功能
需求概述: 微信小程序的一个功能,类似于画板,用于电子签名,要求有一键清空画板和保存功能. 实现思路: 微信开发文档中的Canvas组件微信画布API中的 wx.createCanvasContex ...
微信小程序之保存动态图片功能
效果图:(下面是电脑版,真机也可以调试成功) 1.调用wx.downloadFile方法下载图片到本地. wx.downloadFile({url: path,success: function(re ...
Apache Echarts常用图表之柱状图
文章目录 Echarts常用图表柱状图 1. 柱状图的实现步骤 2. 柱状图的常见效果最大值\最小值 `markPoint` 平均值 `markLine` 数值显示 `label` 柱宽度 `ba ...
Apache Echarts常用图表之折线图
文章目录 Echarts常用图表折线图 1. 折线图的实现步骤 2. 折线图的常见效果最大值\最小值 `markPoint` 平均值 `markLine` 标注区间 `markArea` 数值显示 ...
html svg导出图片,将SVG保存为图片_唐霜的博客
原文:http://techslides.com/save-svg-as-an-image SVG超赞,但是有的时候你想把它转换为其他的图片格式,比如jpg或png.如果你用d3.js创建了一些图表, ...
基于html2canvas实现网页保存为图片及图片清晰度优化
一.实现HTML页面保存为图片 1.1 已知可行方案现有已知能够实现网页保存为图片的方案包括: **方案1:**将DOM改写为canvas,然后利用canvas的toDataURL方法实现将DOM输 ...
h5跨域访问图片_网页保存为图片及高清截图的优化 | canvas跨域图片配置
本次技术调研来源于H5项目中的一个重要功能需求:实现微信长按网页保存为截图. 这里有个栗子(请用微信打开,长按图片即可保存):3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能,常见于H ...

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

文章目录

需求分析

开发准备

实现思路

效果图

参考链接

JS实现Echarts的图表保存为图片功能相关推荐

最新文章

热门文章