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

最新推荐文章于 2024-10-10 15:01:16 发布

奄奄一息的一条咸鱼

最新推荐文章于 2024-10-10 15:01:16 发布

阅读量635

点赞数

CC 4.0 BY-SA版权

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

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

Vue 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种使用ECharts库将折线图导出为JPEG格式图片的方法。通过简单的JavaScript代码实现，开发者可以轻松地将图表保存为高质量的图片文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码：

<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>