echarts 保存/导出图片

要实现将统计图保存为图片导出/下载主要有以下两种方法:

1.工具栏:

toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            }, //区域缩放,区域缩放还原
                            dataView: {
                                readOnly: false
                            }, //数据视图
                            magicType: {
                                type: ['line', 'bar']
                            },  //切换为折线图,切换为柱状图
                            restore: {},  //还原
                            saveAsImage: {}   //保存为图片
                        }
                    },

2.自定义方法:

 exportpic(val){
                let myChart = this.$echarts.init(document.getElementById(val));
                let picInfo=myChart.getDataURL({
                    type: 'png',
                    pixelRatio: 1.5,  //放大两倍下载,之后压缩到同等大小展示。解决生成图片在移动端模糊问题
                    backgroundColor: '#fff'
                });//获取到的是一串base64信息

                const elink = document.createElement('a');
                elink.download = '统计图';
                elink.style.display = 'none';
                elink.href = picInfo;
                document.body.appendChild(elink);
                elink.click();
                URL.revokeObjectURL(elink.href); // 释放URL 对象
                document.body.removeChild(elink)
			},

 

  • 4
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值