echarts（下载图片、预览打印）

最新推荐文章于 2025-04-27 10:26:26 发布

原创

最新推荐文章于 2025-04-27 10:26:26 发布 · 2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文主要介绍了在使用Echarts进行数据统计图表时，如何解决保存图片、预览和打印过程中遇到的问题。针对图表不全、打印指定区域、火狐浏览器预览等问题，提供了详细的解决思路和代码示例，包括利用animation: false避免柱形缺失，通过iframe或新窗口实现局部打印，以及处理火狐浏览器的安全限制。此外，还补充了Echarts自定义工具配置项的方法，包括使用image://、dataURI和path://设置图标。

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

公司需求是使用echarts图表进行数据统计，这些统计图表具有保存为图片及打印功能。

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>第一个 ECharts 实例</title>
	<!-- 引入 echarts.js -->
	<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
	<style>
		<!-- 打印的时候，隐藏设置该类的元素，从而实现打印指定区域（PS：好像刚开始的时候生效了，但之后没有用） -->
		@media print{
			.noprn {
				display: none;
			}
		}
	</style>
</head>

<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div class="noprn">第一个 ECharts 实例</div>
	<div id="main" style="width: 600px;height:400px;"></div>
	<div class="noprn" id="printImg">打印</div>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));

		// 指定图表的配置项和数据
		var option = {
			title: {
				text: '第一个 ECharts 实例'
			},
			tooltip: {},
			toolbox: {
				show: true,
				right: '20px',
				feature: {
					// 下载保存为图片
					saveAsImage: {
						show: true,
						title: '下载'
					}
				}
			},
			// 将动画效果属性设置为false：解决获取到的echarts图不全的问题（只有坐标轴）
			animation: false,
			legend: {
				data: ['销量']
			},
			xAxis: {
				data: ["衬衫", "羊毛衫",