将使用到的echarts图表导出为一张图片

最新推荐文章于 2023-11-20 14:12:42 发布

奄奄一息的一条咸鱼

最新推荐文章于 2023-11-20 14:12:42 发布

阅读量562

点赞数

分类专栏： Vue 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_46682277/article/details/127926362

版权

Vue 专栏收录该内容

16 篇文章 2 订阅

订阅专栏

直接上代码：

<script>
export default {
	methods:{
		exportJpeg(title){
		  // 先获取用来显示折线图的元素
	      let chartDom = document.getElementById('line')
	      // 直接用this.$echarts，因为在main.js中全局注册过了
	      let myChart = this.$echarts.init(chartDom)
	      
	      let picInfo = myChart.getDataURL({
	        type: 'jpeg', // 导出的图片格式，还可以是png
	        pixelRatio: 1.5,
	        backgroundColor: 'white'
	      })
	      let elink = document.createElement("a")
	      elink.download = title // 导出图片的名字
	      elink.style.display = 'none'
	      elink.href = picInfo
	      document.body.appendChild(elink)
	      elink.click()
	      URL.revokeObjectURL(elink.href)
	      document.body.removeChild(elink)
	    }
	}
}
</script>