vue 将echart 下载为base64图片

在这里插入图片描述

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

// 子组件 echart,要保存echartconst 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

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

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

相关文章

【CTF MISC】XCTF GFSJ0155 simple_transfer Writeup(流量分析+文件提取)

simple_transfer 文件里有flag&#xff0c;找到它。 解法 用 wireshark 分析&#xff0c;大部分都是 TCP 协议。 打开协议分级统计&#xff0c;有个 DLEP 占了 94.2% 的数据。 作为过滤器使用。全都是 Unknown。 用 binwalk 扫描。 binwalk f9809647382a42e5bfb64d7d447b409…

集合的介绍

集合指的是数据集中在一块。集合的好处体现在以下几点 1.可以动态保存任意多个对象&#xff0c;使用比较方便。 2.提供了一系列方便的操作对象的方法&#xff1a;add,remove,set,get等&#xff0c;方便增加&#xff0c;删除内容。 集合Collection单列集合一览图 集合Map双列集…

天智云智造管理平台 Usermanager.ashx SQL注入漏洞复现

0x01 产品简介 天智云智造管理平台又称天智云SAAS平台,是专业为中小型生产企业提供智能化生产管理的标准MES软件。 该系统向中小型生产企业提供一站式平台服务,串联销售/采购/生产/质量/仓库等各个部门。对内可以节约成本,规范生产过程,实现质量追溯,实时跟踪生产及库存数…

动态组件 commponted 怎么使用

优点&#xff1a; 提高代码复用性&#xff1a;通过将通用组件了逻辑封装在动态组件中&#xff0c;可以在多个地方重复使用&#xff0c;减少代码冗余。增强灵活性&#xff1a;动态组件可以根据不同的条件或状态动态切换显示内容&#xff0c;使用应用更加灵活和可定制。实现动态…

吴恩达2022机器学习专项课程C2W3:2.24 机器学习实践建议(决定下一步做什么模型评估模型选择交叉验证)

目录 引言一、绘图评估模型的局限性二、使用测试集评估模型1.线性回归2.逻辑回归3.测试误差与泛化误差 三、测试集评估模型存在的问题1.评估模型流程2.流程存在的问题 四、解决问题1.训练集分割成三段2.计算交叉验证集的误差 五、重新评估模型1.线性回归模型2.神经网络模型3.评…

数据仓库与数据挖掘实验练习8

pivot_table()透视表 sales.pivot_table(values Revenue,index Date, columns Name,aggfunc sum,fill_value 0,margins True,margins_name 总计 ) 使用 Pandas 的 pivot_table 函数将一个名为 sales 的 DataFrame 转化为透视表。 1. sales.pivot_table(...) sales: …

将写的项目部署到Linux服务器上

一、首先购入一个云Linux服务器 例如&#xff1a;腾讯云&#xff0c;阿里云等&#xff08;经常会有学生优惠&#xff09; 这个腾讯云&#xff0c;新用户82元可以使用一年&#xff0c;还是可以的&#xff08;如果觉得贵&#xff0c;可以和同学一起拼一个~~&#xff09; 二、连接…

Python实现PPT表格的编写包含新建修改插图(收藏备用)

自动创建一个ppt文件并创建好表格 代码要用到pptx库 pip install python-pptx 创建含有表格的ppt文件代码&#xff1a; from pptx import Presentation from pptx.util import Inches# 创建一个PPT对象 ppt Presentation()# 添加一个幻灯片 slide ppt.slides.add_slide(p…

vscode编译文件夹下所有文件的配置(包含插件和 .json 文件)

文章目录 我所使用的插件.json 文件配置1. c_cpp_properties.json2. launch.json3. settings.json4. tasks.json 如何运行 我所使用的插件 红框中的五个插件是必备的&#xff0c;其中 Code Runner 插件可以在写完一个 .c 或 .cpp 文件后&#xff0c;按下 Crtl R 快捷键快速编…

Kubernetes——Ingress详解

目录 前言——Service策略的作用 1.外部访问方案 2.使用场景和限制 2.1NodePort 2.2LoadBalancer 2.3externalIPs 2.4Ingress 3.Ingress如何实现对外服务 4.LB和Ingress结合起来实现对外服务的过程 一、Ingress 1.定义 2.组成 3.工作原理 4.总结 二、部署Nginx-I…

SQL Server数据库安装部署

目录 一、简介二、安装步骤1、安装包下载2、安装过程 一、简介 SQL Server 是由 Microsoft 公司开发和提供的关系型数据库管理系统&#xff08;RDBMS&#xff09;。它是一个功能强大且可靠的数据库平台&#xff0c;广泛用于企业和组织中的数据存储和管理。以下是 SQL Server 的…

Gradio中Button用法及事件监听器click方法使用

Gradio中Button用法及事件监听器click方法使用 瞎想乱记 事情是这样的&#xff1a;入职时面试的是Java&#xff0c;简历中写了会python&#xff0c;刚好最近有个小项目需要用Python实现&#xff0c;老板就将这个项目交给了我&#xff0c;我… 项目中还真遇到了好几个坑&#…

SEO之关键词扩展(二)

初创企业搭建网站的朋友看1号文章&#xff1b;想学习云计算&#xff0c;怎么入门看2号文章谢谢支持&#xff1a; 1、我给不会敲代码又想搭建网站的人建议 2、新手上云 &#xff08;接上一篇。。。&#xff09; 5、各种形式的变体 1.同义词 假设核心关键词是酒店&#xff0c;…

Ps:批处理

Ps菜单&#xff1a;文件/自动/批处理 Automate/Batch 批处理 Batch命令可以对一个文件夹中的文件执行事先创建的动作 Actions&#xff0c;从而快速地完成大量的重复性操作&#xff0c;提升工作效率。 提示 1&#xff1a; 可以从 Adobe Bridge 中调用 Photoshop 的批处理命令。 …

被斯坦福抄作业了?在线体验下:国产大模型确实越来越棒啦!

抄袭&#xff1f; 这里不做评价了&#xff1a; 官方仓库 地址&#xff1a;miniCPM-Llama3-V-2_5 免费在线体验地址 链接&#xff1a;Llama3-V-2_5 模型能力&#xff1a; 模型实际体验 问他什么模型&#xff1a;&#xff08;可能用了它的数据集吧&#xff09; 图片分析…

「Qt Widget中文示例指南」如何实现一个简单的RHI小部件示例(二)

Qt 是目前最先进、最完整的跨平台C开发工具。它不仅完全实现了一次编写&#xff0c;所有平台无差别运行&#xff0c;更提供了几乎所有开发过程中需要用到的工具。如今&#xff0c;Qt已被运用于超过70个行业、数千家企业&#xff0c;支持数百万设备及应用。 本文将为大家演示如…

一次 K8s 故障诊断:从 CPU 高负载到存储挂载泄露根源揭示

一、背景 现代软件部署中&#xff0c;容器技术已成为不可或缺的一环&#xff0c;在云计算和微服务架构中发挥着核心作用。随着容器化应用的普及&#xff0c;确保容器环境的可靠性成为了一个至关重要的任务。这就是容器SRE&#xff08;Site Reliability Engineering&#xff0c…

【学习笔记】Windows GDI绘图(十)Graphics详解(中)

文章目录 Graphics的方法AddMetafileComment添加注释BeginContainer和EndContainer新建、还原图形容器不指定指定源与目标矩形指定源与目标矩形 Clear清空并填充指定颜色CopyFromScreen截图CopyPixelOperation DrawImage绘制图像DrawImage的GraphicsDrawImageAbort回调ExcludeC…

初识 peerDependencies

目录 初步认识 peerDependencies semver 介绍 # 摘要 # 简介 # 语义化版本控制规范&#xff08;SemVer&#xff09; # 合法语义化版本的巴科斯范式语法 # 为什么要使用语义化的版本控制&#xff1f; # FAQ 示例讲解&#xff1a;vue-router 插件 # 说明 声明 验证 初…

在Windows11系统上搭建SFTP服务器

利用OpenSSH搭建SFTP服务器 下载安装部署OpenSSH创建一个测试账户测试链接为SFTP用户配置根目录下载安装部署OpenSSH 参考链接 部署完启动服务要使用管理员模式。 net start sshd创建一个测试账户 使用PC的微软账户是访问不了SFTP的。 需要使用被微软账户覆盖掉的系统账户和…