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()的具体信息