使用场景:
echarts图表:生成的柱状图/折线图/饼图等可以实现图表的导出,导出格式为一个图片。也可以支持多个图表同时导出为图片,以压缩包的形式下载下来。
下面介绍单个导出+批量导出的具体用法:
1.单个导出功能——以图片的形式
导出功能对应的是toolbox
中的feature
中的saveAsImage
配置
toolbox: {show: true,right: '50',feature: {saveAsImage: { show: true, title: '保存为图片' }}
},
鼠标移入到【下载图标】后,可以显示title
【保存为图片】
导出的图片名称即为title
,上图中导出的图片名称即为【2024-08-29报废面积&报废率】
这是通过echarts
内部方法实现的。
2.多个图片压缩后导出——以.zip的形式
需要通过jsZip
来实现
解决步骤1:安装或者直接cdn引入jsZip
如果是插件安装,可以参考下面的链接:https://blog.csdn.net/sjajjajusja/article/details/135631109
cdn引入的话,因为我的项目是vue2项目,所以需要在public
中的index.html
中引入,并将jsZip.js
放到static
中
解决步骤2:直接使用
下面的chart
就是每一个的图表对象,也就是echarts.init
创建出来的实例
let images = [];
let files = [];// 获取图表的Base64图片URL
const imageURL = chart.getDataURL({type: "png",pixelRatio: 2,backgroundColor: "#fff" // 可以根据需要设置背景色
});
// 将图片URL添加到数组中
images.push(imageURL);
files.push({name: `${titleArr[index]}.png`,content: this.base64ToBlob(imageURL)
});
this.downloadAsZip(files);
base64ToBlob
将base64
转为blob
//base64转blob
base64ToBlob(base64String) {// 移除URL的头部分,即 data:[<mediatype>][;base64],const parts = base64String.split(";base64,");// let contentType = contentType || parts[0].split(':')[1];let contentType = "image/png";let raw = window.atob(parts[1]);let rawLength = raw.length;// 创建一个Uint8Array类型的数组let uInt8Array = new Uint8Array(rawLength);// 将base64字符串中的每个字符转换成ASCII码(字符编码值)for (let i = 0; i < rawLength; ++i) {uInt8Array[i] = raw.charCodeAt(i);}// 使用上面得到的数组创建一个Blob对象return new Blob([uInt8Array], { type: contentType });
},
downloadAsZip
函数如下:
//批量下载
downloadAsZip(files) {// 创建一个新的 JSZip 实例var zip = new JSZip();// 假设 files 是一个对象数组,每个对象包含 name 和 content(Blob或ArrayBuffer)files.forEach(function(file) {// 将文件添加到ZIP中zip.file(file.name, file.content, { binary: true });});// 生成ZIP文件并触发下载zip.generateAsync({ type: "blob" }).then(function(content) {// 创建一个指向该blob的URLvar url = URL.createObjectURL(content);// 创建一个临时的a标签用于下载var a = document.createElement("a");document.body.appendChild(a);a.href = url;a.download = "责任工序分析.zip"; // 设置下载的文件名a.click();// 清理document.body.removeChild(a);window.URL.revokeObjectURL(url);});
},
上面就是批量导出多张图片存储到同一个压缩包的解决办法。
附录:如果想要在同一个dom元素中同时渲染柱状图+饼图,我的思路可能是创建两个并排的div子元素,分别去渲染。
但是在echarts
中本身就支持多个图表的渲染,而且最后生成的结构是在同一个canvas
中的。
解决方法就是:xAxis
和yAxis
都作为一个对象数组,对象可以为空。series
也是一个对象数组,每一个对象的xAxisIndex
和yAxisIndex
都配置成对应的参数即可。