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

相关推荐
quweiie40 分钟前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan20151 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin1 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦2 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆2 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆2 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆2 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding2 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui
江城开朗的豌豆2 小时前
v-for中key值的作用:为什么我总被要求加这个'没用的'属性?
前端·javascript·vue.js
angen20183 小时前
Ruby如何采集直播数据源地址
前端·chrome