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

使用场景:
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);

base64ToBlobbase64转为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中的。
在这里插入图片描述
解决方法就是:xAxisyAxis都作为一个对象数组,对象可以为空。series也是一个对象数组,每一个对象的xAxisIndexyAxisIndex都配置成对应的参数即可。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/412940.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

可信捐赠系统的设计与开发论文

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统可信捐赠系统信息管理难度大&#xff0c;容错率低&#x…

选对文档版本管理软件:10款工具详解

本篇文章中提到的工具包括&#xff1a;1.PingCode&#xff1b;2.Worktile&#xff1b;3.联想Filez&#xff1b;4.蓝凌云&#xff1b;5.阿里云盘&#xff1b;6.360亿方云&#xff1b;7.无忧企业文档&#xff1b;8.DocStar ECM&#xff1b;9.Dropbox Business&#xff1b;10.Shar…

数据库之心:MySQL 探索(一)mysql的安装和基本介绍

欢迎来到我们的MySQL博客&#xff01;在这里&#xff0c;我们将深入探讨MySQL数据库系统的各个方面&#xff0c;包括基础知识、优化技巧、实践案例以及最新的行业趋势。 目录 前言 什么是数据库&#xff1f; 数据库产品 MySQL安装 解压 配置 添加环境变量 初始化MySQL …

Linux云计算 |【第二阶段】SHELL-DAY4

主要内容&#xff1a; grep、egrep的使用&#xff0c;基本/扩展正则、sed的使用&#xff08;非交互、逐行处理、常用命令与选项&#xff09; 补充&#xff1a;grep [-E]选项&#xff0c;表示允许使用扩展的正则表达式&#xff08;同等于egrep&#xff09; 一、grep 与 egrep 的…

基于深度学习的单目标跟踪系统

基于深度学习的单目标跟踪&#xff0c;效果吊打传统算法&#xff0c;3060显卡上达到实时&#xff0c;代码python和c两个版本都有。 基于深度学习的单目标跟踪系统是一种先进的计算机视觉技术&#xff0c;它可以实现实时的、高精度的目标跟踪。与传统的基于特征匹配或模板匹配的…

LED的使用寿命评估

一&#xff0e;前言 LED光源随着时间的推移&#xff0c;输出光功率会逐渐衰减。在某一时间点&#xff0c;当LED发出的光衰减到一定水平&#xff0c;就无法满足应用要求。因此&#xff0c;常遇见客户会索取产品中LED光源的使用寿命数据。那么怎样确认LED的使用寿命呢&#xff1…

MySQL5.6迁移到DM8

注意&#xff1a; MySQL 5.7 与 MySQL 8.0 的语法有所区别&#xff0c;本文档是将MySQL5.6迁移到DM8。 迁移前准备 源库 数据库信息 统计源端业务库要迁移的数据量、字符编码、归档保留等信息。 内容 说明 备注 数据库架构 单机 节点数 1 数据库版本 MySQL 5.6…

UE5 摄像机图像采集到材质 映射到 UI 和 物体表面

一.创建SceneCapture2D的组件 二.创建用于 映射的 贴图 三.将RenderTarget贴图放到SceneCapture2D的摄像机上Scene Capture的TextureTarget 四.这个时候的映射贴图&#xff0c;产生的材质可以直接。放到Plane上。 五&#xff0c;但是如果要用于UI,还需要更改SceneCapture2D的摄…

C语言基础(二十七)

1、位字段&#xff08;Bit-fields&#xff09;也是一种数据结构&#xff0c;允许在结构体&#xff08;struct&#xff09;或联合体&#xff08;union&#xff09;中定义其成员占用特定的位数。对于需要精确控制内存布局或处理硬件寄存器映射等场景非常有用。位字段使得开发者能…

WebRTC协议下的视频汇聚融合技术:EasyCVR视频技术构建高效视频交互体验

视频汇聚融合技术是指将来自不同源、不同格式、不同网络环境的视频流进行集中处理、整合和展示的技术。随着视频监控、远程会议、在线教育、直播娱乐等领域的快速发展&#xff0c;视频数据的规模急剧增长&#xff0c;对视频处理能力和效率提出了更高要求。视频汇聚融合技术通过…

GAMES202——作业3 Screen Space Ray Tracing

任务 为场景实现屏幕空间的全局光照效果 1.直接光照&#xff1a; 实现ssrFragmentShader中的EvalDiffuse(wi, wo, uv) 和EvalDirectionalLight(uv) 函数&#xff0c;并在 main 函数中实现直接光照的效果。 2.屏幕空间光线求交&#xff1a;实现RayMarch(ori, dir, out hitPos) …

C语言初阶 --- 数据在内存中的存储

&#x1f388; 个人主页&#x1f449;&#xff1a;tbRNA-CSDN博客 &#x1f4af; 个人简介&#xff1a;在校大学生一枚&#x1f48b;. &#x1f60d; 希望我的文章对大家有着不一样的帮助&#xff0c;欢迎大家关注我&#xff0c;感谢大家的多多支持&#xff01; &#x1f389; …

前端面试题每日一练,测测你对JavaScript对象继承和 Object.entries() 的理解

今天的挑战题目涉及到JavaScript中的原型链 (prototype chain) 和 Object.entries() 方法的使用。我们将通过一个对象继承的例子来探索如何使用 Object.entries() 获取对象的自身可枚举属性&#xff0c;并进行处理。让我们一起分析这段代码&#xff0c;看看它会输出什么以及为什…

碎碎念之Android中CPU架构arm-v8a、arm-v7a、x86

0 碎碎念 之前写博客都是为了复习基础知识&#xff0c;不过好像也忘得很快hh。 以后估计会写点感兴趣的自己碎碎念&#xff0c;缓解下emo的心情。&#xff08;不像之前的博客&#xff0c;这些博客不准备复现也不贴代码所以不一定对&#xff0c; 仅供个人参考 &#xff09; 现在…

JMeter Plugins之内网插件问题解决

JMeter Plugins之内网插件问题解决 背景 在我司内部进行JMeter工具进行性能脚本开发时&#xff0c;为了提高测试效率&#xff0c;我们会用到部分JMeter提供的插件&#xff0c;但是在我司内网的情况下&#xff0c;我们如果直接点击JMeter界面右上角的插件按钮 弹出来的JMeter…

Python-MNE-源空间和正模型07:修复BEM和头表面

有时在创建BEM模型时&#xff0c;由于可能出现的一系列问题(例如&#xff0c;表面之间的交叉)&#xff0c;表面需要手动校正。在这里&#xff0c;我们将看到如何通过将表面导出到3D建模程序blender&#xff0c;编辑它们&#xff0c;并重新导入它们来实现这一点。我们还将给出一…

图形化编程系统学习10

项目需求&#xff1a; 点击绿旗&#xff0c;可以使用键盘控制小兔子在地图上移动&#xff0c;收集食物&#xff0c;但只能在黄色道路上移动。 食物碰到小兔子会变大后隐藏&#xff0c;并发出声音。 收集完所有食物&#xff0c;回到温暖的小窝 。 思路解析 1、添加背景和角色…

事半功倍:利用增强现实提高工作效率

人们通常认为增强现实只是游戏中的一个强大的功能&#xff0c;然而&#xff0c;研究表明&#xff0c;增强现实在提高工厂的效率和生产力方面也发挥着重要作用。不管增强现实、虚拟现实还是混合现实都能很好地模拟工厂的工作场景&#xff0c;这对于培训、运营、安全和研发方面的…

OpenCV小练习:人脸检测

OpenCV自带人脸检测模型&#xff0c;拿来就能用。所以“人脸检测”这个任务对于OpenCV而言真是太简单了——感叹一下&#xff1a;OpenCV太强大了&#xff01;相关的介绍文章在网上可以搜到很多&#xff0c;原本我觉得没必要再写一篇了。结果我在写练习代码的时候&#xff0c;还…

如何使用 Pytest 进行测试

Pytest 是一个强大的Python测试框架&#xff0c;支持简单单元测试和复杂的功能测试。它具有灵活的断言表达式、支持参数化测试、强大的插件生态系统等特点。 二、环境搭建 1、安装 Pytest&#xff1a; pip install pytest安装完成后&#xff0c;可以通过命令行检查是否安装成…