将Echarts图表导出为图片

最新推荐文章于 2025-06-16 11:18:44 发布

MTonj

最新推荐文章于 2025-06-16 11:18:44 发布

阅读量8.5k

点赞数 3

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/MTonj/article/details/88094856

前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用canvas画布将Echarts生成的图表导出为PNG图片的方法。通过获取画布信息，创建a标签，设置下载名称、地址及文件类型，触发下载事件，实现了图表的便捷导出。

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

将Echarts图表导出为图片,可以利用canvas画布:

    // 获取画布信息
	var canvas = document.getElementsByTagName("canvas");
	if(canvas&&canvas.length>0){
		// 创建标签
		var oA = document.createElement("a");
		// 设置下载名称
		oA.download = "Echarts图表" +".png";
		// 设置地址以及文件类型
		oA.href = canvas[0].toDataURL("image/png");
		document.body.appendChild(oA);
		// 触发下载事件
		oA.click();
		// 移除标签
		oA.remove();