echarts 图表保存为图片

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

echart图表自带图片导出功能，但是使用原生的不是很方便，所以可以简单的封装一个方法，随时调用

首先： 合适的文件夹中新建一个js文件： saveChartImg.js

export default {
	saveImg(idName, chartTitleName) {
		var idName = echarts.init(document.getElementById(idName))
		var picInfo = idName.getDataURL({
			type: 'png',
			pixelRatio: 1.5, //放大两倍下载，之后压缩到同等大小展示。解决生成图片在移动端模糊问题
			backgroundColor: '#fff'
		}) //获取到的是一串base64信息
		const elink = document.createElement('a')
		elink.download = chartTitleName
		elink.style.display = 'none'
		elink.href = picInfo
		document.body.appendChild(elink)
		elink.click()
		URL.revokeObjectURL(elink.href) // 释放URL 对象
		document.body.removeChild(elink)
	}
}

然后在main.js文件中引用声明，方便后期任意页面调用：

/ 下载图表为图片
import saveChartImg from '@/common/utils/saveChartImg.js'
Vue.prototype.$saveChartImg = saveChartImg

最后在页面中，添加点击事件方法保存为图片:

// 可以加入任意的条件判断，也可以同时下载多个图表
	saveZhuLeftRightImg(idName, chartTitleName) {
            this.$saveChartImg.saveImg(idName, chartTitleName)
			
	}