（新手）关于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');

	}

三、将编码传到后台：注意，使用ajax提交不能触发浏览器的下载功能，因此，先用ajax提交到后台，写入excel文件，然后使用window.location.herf找到已经写好的excel文件，触发浏览器自带的下载功能（或者使用表单提交）

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<byte[]> 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，读者可自行百度。（声明：本人是是新手，如果内容不对的地方，请指出，共同学习）