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

最新推荐文章于 2024-06-05 17:08:48 发布

enmmmm

最新推荐文章于 2024-06-05 17:08:48 发布

阅读量1.8k

点赞数 3

分类专栏：知识补充文章标签： javascript

本文链接：https://blog.csdn.net/enmmmm/article/details/109242232

版权

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

摘要由CSDN通过智能技术生成

公司需求是使用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: ["衬衫", "羊毛衫",

最低0.47元/天解锁文章

enmmmm

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
echarts（下载图片、预览打印）

公司需求是使用echarts图表进行数据统计，这些统计图表具有保存为图片及打印功能。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>第一个 ECharts 实例</title>  <script src="https://cdn.staticfile.org/echarts/4.3.0/e
复制链接

扫一扫

专栏目录