当前位置: 首页 > news >正文

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.lryc.cn/news/362532.html

相关文章:

  • 视频汇聚EasyCVR平台视图库GA/T 1400协议与GB/T 28181协议的区别
  • 白杨SEO:小红书标题怎么写?小红书怎么推广引流到微信?小红书违规注销不了怎么办?33个小红书运营常见问题解答【干货】
  • Linux压测
  • Linux如何远程连接服务器?
  • Java 应用部署与优化:简单介绍Java应用的部署策略,并讲解一些常用的Java应用性能优化技巧
  • cudart link错误自动修复脚本
  • 个人笔记-随意记录
  • Linux:confluence8.5.9的部署(下载+安装+破ji)离线部署全流程
  • JavaDS-学习数据结构之如果从零开始手搓顺序表,顺带学习自定义异常怎么用!
  • 汽车IVI中控开发入门及进阶(二十三):i.MX8
  • HarmonyOS(29)onMeasureSize和PlaceChildren (View的测量和布局)
  • 如何管理和维护组件库?
  • 使用Python和wxPython将PNG文件转换为JPEG文件
  • spark的简单学习二
  • 测试文章27-这是一篇测试文章请忽略
  • 卡方分布和 Zipf 分布模拟及 Seaborn 可视化教程
  • 音视频开发13 FFmpeg 音频 相关格式分析 -- AAC ADTS格式分析
  • 周三晚19:00 | 数据资源入表案例拆解,他们如何应对入表难点?
  • 树的知识总结
  • 工业安全智勇较量,赛宁网安工业靶场决胜工业网络攻防对抗新战场
  • 一种一维时间序列信号的广义小波变换方法(MATLAB)
  • 【GIC400】——驱动代码实现
  • 如何在 Vue 组件中正确地使用 data 函数?
  • .Net 基于MiniExcel的导入功能接口示例
  • 流量焦虑?别担心,Xinstall一站式App推广解决方案来了!
  • 降薪潮要开始了么?
  • 网络服务DHCP的安装
  • SELinux:安全增强型Linux
  • .NET Redis限制接口请求频率 滑动窗口算法
  • Java List数据结构与常用方法