vue 将echart 下载为base64图片

在这里插入图片描述

1 echart是页面的子组件,
2 页面有多个echart
3 将多个echart下载为base64图片

// 子组件 echart,要保存echart
 const chart = this.$echarts.init(this.$refs.chart, 'light')
this.chartData = chart;   //保存数据,供父组件alarmReport调用(this.$refs.chartItem) 
// 父组件
      let childComponent = this.$refs.chartItem	// 获取子组件
        let chArr = []
          for (var i = 0; i < childComponent.length; i++) {
            if (childComponent[i].datakeys.length > 0) {   // 判断echarts 数据是否为空
              chArr.push({ data: childComponent[i].chartData })
            }
          }
          let eimgs = chArr.map(item => {
            item.chartData = item.data.getDataURL({   //echarts下载图片,getDataURL获取base64地址
              pixelRatio: 2,
              backgroundColor: '#fff'
            })
            return { src: item.chartData }
          })
          this.chartImg = eimgs
 this.chartImg.map(item => `<img src="${item.src}" width="550"/>`)
 // base64 url 可直接使用; 也可供html使用,下载文件等

推荐扩展阅读
前端实现将echarts放入word文件中导出下载
链接: http://t.csdnimg.cn/L5cNg

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

专业130+总分400+四川大学951信号与系统考研经验川大电子信息与通信工程,真题,大纲,参考书。教材。

今年四川大学951信号与系统专业课130&#xff08;据我所知没有140以上的今年&#xff09;&#xff0c;总分400&#xff0c;顺利上岸川大&#xff0c;回顾一下自己这一年的复习&#xff0c;希望自己的经历可以对大家复习有所借鉴&#xff0c;也是对自己的考研画上句话。专业课&a…

重庆耶非凡科技业务大盘点:这些领域你都了解吗?

重庆耶非凡科技有限公司&#xff0c;这家位于重庆市经开区的企业&#xff0c;以其独特的业务模式和专业的技术实力&#xff0c;赢得了业界的广泛认可。它的主要业务涵盖了选品师项目和人力RPO项目两大领域。 首先&#xff0c;我们不得不提的是耶非凡科技的选品师项目 在当今消费…

算法004:盛水最多的容器

这道题比较简单&#xff0c;使用双指针。 要求的是最大面积&#xff0c;对于一个水桶&#xff08;水杯来说&#xff09;&#xff0c;面积的算法是固定的&#xff0c;就是底乘以高。 在这个题中&#xff0c;我们把左边的位置设为left&#xff0c;右边的位置设为right&#xff…

vue3 + echarts 二次开发百分比饼图

效果图&#xff1a; 安装 pnpm i echarts 公共模块组件 <divclass"pie"ref"percent"style"width: 100%; height: calc(100% - 48px)"></div> import { ref, onMounted } from vue import * as echarts from echarts const prop…

JavaEE:http请求 | 过滤器 | 同步与异步请求 | 跨域问题 | axios框架 有这一篇就够!

&#x1f4c3;HTTP请求 ▐ http超文本传输协议&#xff1a; ⦁ http超文本传输协议属于应用层协议&#xff0c;传输内容必须是超文本内容 (网页内容) ⦁ 例如在网页上点击超链接&#xff0c;提交表单&#xff0c;都可以向后端发送一个http请求 ⦁ 一次http请求中包含请求行、…

盘点哪些企业容易被ddos攻击

DDoS&#xff08;分布式拒绝服务&#xff09;攻击已成为网络安全威胁中的重要一环。本文将探讨哪些类型的企业容易成为DDoS攻击的目标&#xff0c;并提出相应的防范策略&#xff0c;帮助企业更好地保护自身网络安全。 一、电子商务平台 电子商务平台作为线上交易和支付的重要场…

Direct local .aar file dependencies are not supported when building an AAR.

最近升级了最新的AndroidStdio版本&#xff0c;然后导入之前的安卓工程 然后经过一番折腾后项目可以跑了&#xff0c;但是意外发现出release包的时候报错了&#xff0c; Direct local .aar file dependencies are not supported when building an AAR. 网上有很多解决方法&am…

鸿蒙HarmonyOS实战—如何使用Video组件播放视频

1.视频播放 鸿蒙系统中&#xff0c;关于视频播放&#xff0c;可以使用上层视频组件Video。 参数如下 src 支持file:///data/storage路径前缀的字符串&#xff0c;用于读取应用沙箱路径内的资源。需要保证目录包路径下的文件有可读权限。 说明&#xff1a;视频支持的格式是&am…

opencv-python(四)

读取图像文件 image cv2.imread(path, flag) flag&#xff1a;1. 默认值&#xff0c;依原图像读取图像&#xff0c;保留Alpha透明度通道。2.IMREAD_GRAYSCALE&#xff1a;将图像转为灰度再读取。3.IMREAD_COLOR&#xff1a;将图像转为三通道BGR彩色再读取。 可读取的图像格…

猫头虎分享已解决Bug || Error: ‘fetch‘ is not defined

原创作者&#xff1a; 猫头虎 作者微信号&#xff1a; Libin9iOak 作者公众号&#xff1a; 猫头虎技术团队 更新日期&#xff1a; 2024年6月6日 博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &…

HBuildX创建uni-app项目

新建项目 输入项目名称&#xff0c;选择存放位置、项目模板、vue版本 创建成功后左边会显示项目目录 安装插件&#xff1a;工具-》插件安装&#xff0c;根据所选vue版本安装编译器 点击运行&#xff0c;选择你需要运行的地方即可

Java面试题:ArrayList底层实现原理、HashMap的实现原理、HashMap的jdk1.7和jdk1.8有什么区别

文章目录 一、List相关面试题1.1 ArrayList源码分析&#xff08;底层实现&#xff09;1.2 ArrayList底层的实现原理是什么1.3 ArrayList listnew ArrayList(10)中的list扩容几次1.4 如何实现数组和List之间的转换1.5 ArrayList 和 LinkedList 的区别是什么 二、HashMap相关面试…

[协议]TCP协议

TCP,UDP协议工作在传输层 TCP基于连接&#xff1b; UDP基于非连接 TCP三次握手 UDP:不能保证丢包&#xff0c;传输稳定性不如TCP;

【SVG 生成系列论文(十一)】如何定制化地生成 SVG 图案?Text-Guided Vector Graphics Customization

SVG 生成系列论文&#xff08;一&#xff09; 和 SVG 生成系列论文&#xff08;二&#xff09; 分别介绍了 StarVector 的大致背景和详细的模型细节。SVG 生成系列论文&#xff08;三&#xff09;和 SVG 生成系列论文&#xff08;四&#xff09;则分别介绍实验、数据集和数据增…

《2024年DDoS趋势报告》:DDoS攻击规模飙升233.33%

2023年&#xff0c;数字领域面临着分布式拒绝服务&#xff08;DDoS&#xff09;攻击的变革浪潮&#xff0c;攻击速度创纪录地达到了每秒700 Gbps和8000万数据包。这些事件跨越了从游戏到金融服务的各个行业&#xff0c;突显了DDoS是一种普遍存在的风险。 值得注意的是&#xf…

关于家储用防逆流电流互感器AKH-0.66/K K-φ16 100A/40mA详细介绍-安科瑞 蒋静

1.产品特点 产品外形美观&#xff0c;安装、接线方便&#xff0c;专用于通讯机房 100A 及以下配电系统改造&#xff0c;可与 AMC16 多回路监控仪表配合使用。 2.型号说明 3.外形尺寸(公差&#xff1a;2mm) 4.规格参数对照表 5.使用环境 &#xff08;1&#xff09;额定工作…

2024年能源、电力电气与机电工程国际学术会议(ICEPEME 2024)

全称&#xff1a;2024年能源、电力电气与机电工程国际学术会议&#xff08;ICEPEME 2024&#xff09; 2024 International Conference on Civil Engineering and Architectural Planning 会议网址:http://www.icepeme.com会议时间&#xff1a;2024/7/10截稿时间&#xff1a;20…

【传知代码】时序预测:多头注意力+宽度学习(论文复现)

前言&#xff1a;近年来&#xff0c;随着人工智能技术的飞速发展&#xff0c;尤其是深度学习领域的突破&#xff0c;时序预测领域也迎来了新的变革。传统的预测方法&#xff0c;如线性回归、时间序列分析等&#xff0c;虽然在某些场景下表现良好&#xff0c;但在面对复杂、非线…

FPGA - 4位数值比较器电路

4位数值比较器电路 描述 某4位数值比较器的功能表如下。 请用Verilog语言采用门级描述方式&#xff0c;实现此4位数值比较器 输入描述&#xff1a; input [3:0] A , input [3:0] B 输出描述&#xff1a; output wire…

嵌入式科普(20)2024瑞萨技术交流日

没有来参加技术交流日的一天&#xff0c;可能就是决定一生的一天。 分享2024瑞萨技术交流日MVP结算画面&#xff1a; 强烈建议点击b站小程序&#xff0c;听背景音乐&#xff0c;感受九子夺嫡结算MVP&#xff0c;四爷王上加白。从此以后写代码再也不出bug 嵌入式科普(20)2024瑞…