解决echart图例导出成word文档存在的问题

最新推荐文章于 2024-02-28 14:37:14 发布

原创最新推荐文章于 2024-02-28 14:37:14 发布 · 802 阅读

CC 4.0 BY-SA版权

在将Echarts图例导出成Word文档时，会出现展示不出来的情况，需前后端配合解决。项目使用Idea开发，前端将Echarts图例的base64路径信息传给后端，后端存储到指定目录，再根据返回的图片信息拼接挂在img的src下，以图片形式展示。

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

echart图例导出成word文档，在word文档中会出现echart展示不出来的情况，那么就需要前后端配合解决这个问题。我们项目开发工具是用的Idea，前端需要将echarts图例中的base64的路径信息传给后端，后端再将其存储到其target/static目录资源下，然后根据后端返回的图片信息将其拼接挂在img的src下，此刻在word文档上看到其实是一个echarts图例转换成的图片展示的

<!-- echarts实例 -->
<div id="echartOne">
</div>

<!-- echarts图片 -->
<img id="echartOneImg"/>

<script src="../libs/jquery/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../libs/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
<script src="../libs/echarts/echarts.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	let echartOne = echarts.init(document.getElementById("echartOne"));

	let option = {
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
		},
		yAxis: {
			type: 'value'
		},
		series: [{
			data: [820, 932, 901, 934, 1290, 1330, 1320],
			type: 'line',
			areaStyle: {}
		}]
	};
	
	echartOne.setOption(option)
	
	let promiseOne = new Promise((resolve,reject) =>{
		echartOne.on('finished',function(){
			resolve()
		})
	}).then(()=>{
		// 获取echarts实例中的图片路径信息（图片Base64）
		let picUrlInfo = echartOne.getDataURL()
		// 调用echartToImg方法
		echartToImg(picUrlInfo,"#echartOne","#echartOneImg")
	})
	
	// 将echart实例中的图片Base64路径信息传递给后台，
	// 后台做处理存入target/statics资源下，
	// 根据后台返回的信息，将图片路径加载到图片的src属性中
	function echartToImg(picUrlInfo,echartId,echartImgId){
		let baseUrl = window.location.origin;
		let loadIndex;
		$.ajax({
			url:'/import/URL',//接口是假的
			method:"post",
			data:{
				echartInfo:picUrlInfo
			},
			beforeSend:function(){
				loadIndex = layer.load();
			},
			complete:function(){
				layer.close(loadIndex);
			},
			success:function(res){
				$("#echartOneImg").attr("src",baseUrl + res.data)
			}
		})
	}
	
</script>