图表操作——图表保存为图片+多个图表批量保存为压缩包—

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

news2024/11/16 13:02:55

使用场景：
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的URL
    var 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都配置成对应的参数即可。