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)
			},

 

你可能感兴趣的:(echarts)