页面统计了数据后，通过echarts能够很好的将数据已图表的像是展示出来，非常美观炫酷，但是仅仅在页面上展示是不够的，公司内部发送邮件报告需要以excel文档展示，所以，需要将以生成的echarts生成的图片传输到后台。 将图片传输到后台，通常我们需要将图片转成base64编码，后台对编码进行处理，就可以在服务器端生成图片，然后将图片放到Excel表中的制定位置。
echarts的getDataURL()方法
通过eharts处理数据展示在页面上的图表是canvas绘制，还不是图片元素，echarts的toolbox里面提供方法能够点击下载图片：
toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
}
点击后可以下载png格式的图片，那么如何通过外部方式将canvas转成图片的base64编码呢？echarts中提供了getDataURL()方法。 要使用getDataURL()方法的前提是已有渲染的图片，以现有的一段代码为例（我的展示是以tab的形式展示，故会点击tab时重新渲染，虽然echarts会一直提示can’t find height and width）：
var myChart3;//定义为全局变量，不然会找不到要转换的对象
function sumofper(dataY,data1,data2){
//获取数组中的最大值，以此来灵活控制y轴的高度
var max1=Math.max.apply(null,data1);
var max2=Math.max.apply(null,data2);
var arrr=[max1,max2];
var max=Math.max.apply(null,arrr);
var Max=max+5;//y轴高度比最大值大5
//重新渲染高和宽
var main=document.getElementById('mainss');
var resizemain=function (){
main.style.width=(window.innerWidth*0.9)+'px';
main.style.height=(window.innerHeigth*0.5)+'px';;
}
resizemain();
var barcampaign=echarts.init(document.getElementById('mainss'));
myChart3=barcampaign;//赋值给全局变量
$(window).on('resize',function(){//
//屏幕大小自适应，重置容器高宽
resizemain();
myChart3.resize();
});
option = {
title : {
text: '部门周人力饱和情况'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['标准','实际']
},
toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis :
{
type : 'category',
data : dataY,
axisLabel:{
interval:0,
//rotate:45,
margin:2,
textStyle:{
color:"#000000"
}
}
},
grid: { // 控制图的大小，调整下面这些值就可以，
x: 170,
x2: 100,
y2: 50,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
},
yAxis :
{
type : 'value',
name:'次数',
max:Max,
},
series : [
{
name:'标准',
type:'bar',
barWidth : 30,
data:data1,
markLine : {
data : [
{type : 'average', name: '平均值'}
]
},
itemStyle:{
normal: {
label : {show: true, position:'top', textStyle: {
color: 'black'
}},
}
}
},
{
name:'实际',
type:'bar',
barWidth : 30,
data:data2,
markLine : {
data : [
{type : 'average', name : '平均值'}
]
},
itemStyle:{
normal: {
label : {show: true, position:'top', textStyle: {
color: 'black'
}},
}
}
}
]
};
myChart3.setOption(option);
}
然后是导出方法，转成base64编码
function exportall(){
//导出，导出当前数据和图形的base64编码
var picinfo1=myChart1.getDataURL();
var picinfo2=myChart2.getDataURL();
var picinfo3=myChart3.getDataURL();
$.ajax({
url:'exportWeekReport',//后台处理地址
dataType:'text',
type:'POST',
data:{"pic1":picinfo1,"pic2":picinfo2,"pic3":picinfo3},
error:function(errMsg){
alert(errMsg);
},
success:function(data){
alert("导出周报成功",{time:3000});
window.location.href = "report_downloadWeekreport";
}
});
}
后台处理方法
/**
* 解析图片
* @param base64Info
* @param filePath
* @return
*/
private String decodeBase64(String base64Info, File filePath){
if(StringUtils.isEmpty(base64Info)){
return null;
}
BASE64Decoder decoder = new BASE64Decoder();
String[] arr = base64Info.split("base64,");
// 数据中：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABI4AAAEsCAYAAAClh/jbAAA ... 在"base64,"之后的才是图片信息
String picPath = filePath+ "/"+ UUID.randomUUID().toString() +".png";
try {
byte[] buffer = decoder.decodeBuffer(arr[1]);
OutputStream os = new FileOutputStream(picPath);
os.write(buffer);
os.close();
} catch (IOException e) {
throw new RuntimeException();
}
return picPath;
}
然后处理导出到Excel中就可以了，至于处理导出和处理效果的代码我就不贴了，效果如下：
