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

相关推荐
群联云防护小杜40 分钟前
构建分布式高防架构实现业务零中断
前端·网络·分布式·tcp/ip·安全·游戏·架构
ohMyGod_1232 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜052 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界2 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
Hilaku2 小时前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery
爱分享的程序员2 小时前
前端面试专栏-算法篇:20. 贪心算法与动态规划入门
前端·javascript·node.js
我想说一句2 小时前
事件委托与合成事件:前端性能优化的"偷懒"艺术
前端·javascript
爱泡脚的鸡腿2 小时前
Web第二次笔记
前端·javascript
良辰未晚2 小时前
Canvas 绘制模糊?那是你没搞懂 DPR!
前端·canvas
Dream耀2 小时前
React合成事件揭秘:高效事件处理的幕后机制
前端·javascript