外置按钮将echarts图表导出为png与svg格式

在这里插入图片描述
两个文字类型的按钮,分别导出PNG与SVG格式。官方默认只能导出png或者jpg,且是在toolbox组件内按钮导出。
显示用的是Vue+ElementUI,不过这些不重要。

<div class="output">
    <span>图表导出:</span>
    <el-link class="outputbutton" type="info" @click="output('PNG')">PNG</el-link>
    <el-link class="outputbutton" type="info" @click="output('SVG')">SVG</el-link>
</div>

对应的方法(核心代码)

// 图片导出
output(type) {
	// this.chartObject存的是echarts实例
    if(this.chartObject){
    	// echarts官网文档实例方法getDataURL
        let picInfo = this.chartObject.getDataURL({
            type: 'png',
            pixelRatio: 1.5,  // 放大两倍下载。解决生成图片在移动端模糊问题
            backgroundColor: '#fff',
            excludeComponents: ['toolbox']	// 导出时忽略toolbox组件
        });// 获取到的是一串base64信息
        
        if(type == 'PNG'){
            const elink = document.createElement('a');
            // 设置默认文件名,this.chartTitle为绘图时生成的标题
            elink.download = this.chartTitle + ".png";
            elink.style.display = 'none';
            elink.href = picInfo;
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
        }
        else if(type == 'SVG'){
            let mycanvas = document.querySelector('#' + this.id + ' canvas');
			
			//设置svg标签属性
            let svg0 = document.createElementNS('http://www.w3.org/2000/svg','svg');
            svg0.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
            svg0.setAttribute('version', '1.1');
            svg0.setAttribute('height', mycanvas.height);
            svg0.setAttribute('width', mycanvas.width);
            let img3 = document.createElementNS('http://www.w3.org/2000/svg','image');
            // base64编码写入href
            img3.href.baseVal = picInfo;
            img3.setAttribute('height', mycanvas.height);
            svg0.appendChild(img3);
            let h = svg0.outerHTML;
            //给图片对象写入base64编码的svg流
            let data = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(h))); 
            
            const elink = document.createElement('a');
            // 设置默认文件名,this.chartTitle为绘图时生成的标题
            elink.download = this.chartTitle + ".svg";
            elink.style.display = 'none';
            elink.href = data;
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
        }
    }
    else{
        this.$message({
            message: '暂未绘制图表,请先绘制图表',
            type: 'error'
        });
    }
},
  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值