图表操作——图表保存为图片+多个图表批量保存为压缩包——js技能提升 ...

使用场景：
echarts图表：天生的柱状图/折线图/饼图等可以实现图表的导出，导出格式为一个图片。也可以支持多个图表同时导出为图片，以压缩包的形式下载下来。

下面介绍单个导出+批量导出的具体用法：
1.单个导出功能——以图片的形式

导出功能对应的是toolbox中的feature中的saveAsImage配置

1. toolbox: {
2.   show: true,
3.   right: '50',
4.   feature: {
5.     saveAsImage: { show: true, title: '保存为图片' }
6.   }
7. },

复制代码

鼠标移入到【下载图标】后，可以体现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创建出来的实例

1. let images = [];
2. let files = [];
3. // 获取图表的Base64图片URL
4. const imageURL = chart.getDataURL({
5.   type: "png",
6.   pixelRatio: 2,
7.   backgroundColor: "#fff" // 可以根据需要设置背景色
8. });
9. // 将图片URL添加到数组中
10. images.push(imageURL);
11. files.push({
12.   name: `${titleArr[index]}.png`,
13.   content: this.base64ToBlob(imageURL)
14. });
15. this.downloadAsZip(files);

复制代码

base64ToBlob将base64转为blob

1. //base64转blob
2. base64ToBlob(base64String) {
3.   // 移除URL的头部分，即 data:[<mediatype>][;base64],
4.   const parts = base64String.split(";base64,");
5.   // let contentType = contentType || parts[0].split(':')[1];
6.   let contentType = "image/png";
7.   let raw = window.atob(parts[1]);
8.   let rawLength = raw.length;
9.   // 创建一个Uint8Array类型的数组
10.   let uInt8Array = new Uint8Array(rawLength);
11.   // 将base64字符串中的每个字符转换成ASCII码（字符编码值）
12.   for (let i = 0; i < rawLength; ++i) {
13.     uInt8Array[i] = raw.charCodeAt(i);
14.   }
15.   // 使用上面得到的数组创建一个Blob对象
16.   return new Blob([uInt8Array], { type: contentType });
17. },

复制代码

downloadAsZip函数如下：

1. //批量下载
2. downloadAsZip(files) {
3.   // 创建一个新的 JSZip 实例
4.   var zip = new JSZip();
5.   // 假设 files 是一个对象数组，每个对象包含 name 和 content（Blob或ArrayBuffer）
6.   files.forEach(function(file) {
7.     // 将文件添加到ZIP中
8.     zip.file(file.name, file.content, { binary: true });
9.   });
10.   // 生成ZIP文件并触发下载
11.   zip.generateAsync({ type: "blob" }).then(function(content) {
12.     // 创建一个指向该blob的URL
13.     var url = URL.createObjectURL(content);
14.     // 创建一个临时的a标签用于下载
15.     var a = document.createElement("a");
16.     document.body.appendChild(a);
17.     a.href = url;
18.     a.download = "责任工序分析.zip"; // 设置下载的文件名
19.     a.click();
20.     // 清理
21.     document.body.removeChild(a);
22.     window.URL.revokeObjectURL(url);
23.   });
24. },

复制代码

上面就是批量导出多张图片存储到同一个压缩包的解决办法。
附录：如果想要在同一个dom元素中同时渲染柱状图+饼图，我的思绪大概是创建两个并排的div子元素，分别去渲染。
但是在echarts中自己就支持多个图表的渲染，而且最后天生的结构是在同一个canvas中的。

解决方法就是：xAxis和yAxis都作为一个对象数组，对象可以为空。series也是一个对象数组，每一个对象的xAxisIndex和yAxisIndex都配置成对应的参数即可。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。