（新手）关于echarts图形导出到excel
一、情景：本人刚接触echarts不久，之前有一个小功能需要实现：将echarts生成的图形导出到excel中，百度了好久。由于本人是新手，所有百度上的获取图形的base64编码的有些方法是没有理解，同事有个大神写了一个js，各种方法获取编码，然后用使用虚拟表单提交，直接一脸懵逼，耽误好长时间才解决。后来为了完成任务，直接套用这个大神的方法，根本不理解。后来回头研究了一下，这里总结一下自己的实现过程，希望会是更加简单易懂。 （注：使用的是echarts2.0，由于3.0差别有点大，不知道是否合适）
二、echarts代码：获取echarts图片的base64编码
var imagesBase64="";
function lineCharts(data){
//将Echarts初始化到div中
var eChart = echarts.init(document.getElementById('roadLevel01'));
//设置options
options = {
title : {
text : '问题道路里程柱图展示',
x : 'center',
y : 20
},
animation: false,//关闭动画效果，避免导出的图形不完整
tooltip : {
trigger : 'axis'
},
legend : {
data : [ '问题道路里程' ],
x : 40,
y : 45,
textStyle : {
fontSize : 8,
},
orient : 'vertical'
},
grid : {
x : '20%',
y : '24%',
width : "70%",
height : '60%',
containLabel : true
},
calculable : false,
xAxis : [ {
type : 'category',
axisLine : {
onZero : false,
},
axisLabel : {
interval : 0,
margin : 2,
},
data : [ '1-3', '1-4', '1-5' ]
} ],
yAxis : [ {
type : 'value',
name : '里程（公里）',
axisLine : {
lineStyle : {
color :'#205a94'
}
},
axisLabel : {
formatter : '{value} '
}
} ],
series : [ {
name : '问题道路里程',
type : 'bar',
smooth : true,
//参数传入的数据，可以根据自己的需求获取数据
data : echartsData,
barWidth : 20,
markPoint : {
data : [ {
type : 'max',
name : '最大值'
}, {
type : 'min',
name : '最小值'
} ]
},
markLine : {
data : [ {
type : 'average',
name : '平均值'
} ]
}
} ]
};
//setOptins
eChart.setOption(options);
//echarts自带的获取图形的base64方法,使用全局变量接收
imagesBase64=eChart.getDataURL('png');
}function submitImageBase64(){
$.ajax({
url: url,//使用自己交互到后台的url
type : "post",
data:{
'imagesBase64':imagesBase64
},
success : function(da) {
if(da.success==1)
{
//下载生成的excel
window.location.href = da.filePath;
}
},
error:function(da) {
layer.close(index);
alert("数据导出出错");
}
});
}四、后台处理代码
public ModelMap getBase64(HttpServletRequest request,HttpServletResponse response) {
ModelMap result = new ModelMap();
// 声明一个工作薄
XSSFWorkbook wb = new XSSFWorkbook();
// 生成一个样式
XSSFCellStyle style = wb.createCellStyle();
//样式字体居中
style.setAlignment(HSSFCellStyle.ALIGN_CENTER);
//声明第一个sheet名称
XSSFSheet sheet1 = wb.createSheet("问题道路图形展示");
List images = new ArrayList<>();
// 必须去除每个base64前面的"data:image/png;base64,"这22个字符
try {
images.add(decode(request.getParameter("imagesBase64" ).substring(22)));
} catch (IOException e) {
e.printStackTrace();
}
//设置宽高
sheet1.setDefaultRowHeight((short)(350*30/25));
sheet1.setColumnWidth( (int)(400*1990/140));
//将获取到的base64 编码转换成图片，画到excel中
XSSFDrawing patriarch =sheet1.createDrawingPatriarch();
XSSFClientAnchor anchor=null;
int index=0;
for(byte[] image:images){
anchor = new XSSFClientAnchor(0,0,0,0,(short) (8*(index%3)),((index/3)*18),(short)(7+8*(index%3)), 16+((index/3)*18));
patriarch.createPicture(anchor, wb.addPicture(image, XSSFWorkbook.PICTURE_TYPE_PNG));
index++;
}
// 工程路径（根据个人需要，路径可以写简单的磁盘路径）
String parentPath = (new File(getClass().getResource("/").getFile()
.toString())).getParentFile().getParent();
String path = request.getContextPath();
String fileName = parentPath + File.separator + "csvfile"
+ File.separator + "等级道路数据导出"+startTime+".xlsx";
File file = new File(fileName);
if (file.isFile()) {
file.delete();
}
// 规定的路径下，生成excel表格
FileOutputStream output = null;
try {
output = new FileOutputStream(fileName);
wb.write(output);
output.flush();
output.close();
result.put("filePath", path + File.separator + "csvfile"
+ File.separator + "等级道路数据导出"+startTime+".xlsx");
result.put("success", 1);
}catch (FileNotFoundException e) {
result.put("success", 0);
e.printStackTrace();
} catch (IOException e) {
result.put("success", -1);
try {
if (wb != null) {
wb.close();
}
if (output != null) {
output.close();
}
} catch (Exception e1) {
e1.printStackTrace();
}
}
return result;//返回excel的路径到js中的window.location.herf ，触发浏览器的下载功能
} 五、总结：后台处理图片到excel中，这个会使用poi，读者可自行百度。（声明：本人是是新手，如果内容不对的地方，请指出，共同学习）