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

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>

下图是let picUrlInfo = echartOne.getDataURL()的具体信息
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值