一、前台

1.创建echarts统计图相关

//基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('taskTotal'));//项目统计//项目统计指定图表的配置项和数据
var initOption = {title: {text: '月度计划项目统计图',x:'center',y:'top',//标题位置textAlign:'center'},tooltip: {trigger: 'axis'//鼠标移上图标触发轴},legend: {//图例;data:['计划完成值','实际完成值'],x:'center',y:'bottom'//图例位置},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true//坐标轴标签不会溢出容器},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,//左右无留白;name:'月份',//横轴名称data: []},yAxis: {type: 'value',name:'数量'//纵轴名称},series: [{ name:'计划完成值',type:'line',stack: '总量2',symbol: 'circle',     //设定为实心点symbolSize: 10,   //设定实心点的大小itemStyle : {  normal : { color:'#0099ff' ,//折线点颜色lineStyle:{  color:'#0099ff' ,//折线条颜色width:2,type:'dashed'  //'dotted'虚线 'solid'实线 }  }},data:[]},{name:'实际完成值',type:'line',stack: '总量1',symbol: 'circle',     //设定为实心点symbolSize: 10,   //设定实心点的大小itemStyle : {  normal : {  lineStyle:{  color:'red',width:2 }  }},data:[]}]
};

以上的taskTotal是一个预先准备好id=“taskTotal”的dom，即一个有明确宽高的div区域。

2.给统计图赋值

//项目统计
function taskTotal(unitNames,startDate,endDate){$.ajax({url :webCfg.servePath +"/reportForm/showTotalForm",type: "POST",dataType : "JSON",contentType: "application/x-www-form-urlencoded; charset=UTF-8",data: {"unitNames":encodeURI(unitNames),"startDate":startDate,"endDate":endDate},cache : false,beforeSend : function(XHR) {},success : function(result) {//请求成功时处理var data =result;if (typeof(data.xAxis) == "undefined"||typeof(data.series) == "undefined"){initOption.xAxis.data = [];//x轴initOption.series[0].data = [];initOption.series[1].data = [];}else{//initOption.legend.data = data.legend;initOption.xAxis.data = data.xAxis;//x轴var serieslist = data.series;for (var i = 0; i < serieslist.length; i++) {//循环放入数据initOption.series[i].data = serieslist[i];}}myChart.setOption(initOption, true);var common=$("#taskTotal").parent();//该表单的父节点//页面表单回显common.find("input[name='startTime']").val(data.echoes.startTime);common.find("input[name='endTime']").val(data.echoes.endTime);common.find("input[name='unitNames']").val(data.echoes.unitNames);//给报表表格添加内容;var html ="";if(data.xAxis!= null && typeof data.xAxis !== "undefined" && data.xAxis.length>0){for(var i=0;i<data.xAxis.length;i++){html+="<tr>";html+="<td width='6%'>"+(i+1)+"</td>";html+="<td>"+data.xAxis[i]+"</td>";html+="<td>"+data.xAxis[i]+"</td>";html+="<td>"+(data.series[0])[i]+"</td>";html+="<td>"+(data.series[1])[i]+"</td>";html+="</tr>";}}else{html ="<tr><td colspan='99' style='text-align:center'>查询数据为空</td></tr>";}common.find("tbody").empty();common.find("tbody").append(html);},complete : function() {//请求完成的处理},error : function(e) {//请求出错处理alert(e);}});
}

赋值数据通过请求后台得到，这里省略(按需要补充)。

3.js以post方式提交统计报表数据

//点击导出按钮获取到导出Excel的相关数据
function btnExcel() {var picBaseCode=myChart.getDataURL();//获取报表上存在的条件var unitNames=nodeCommon.find("input[name='unitNames']").val();var startDate=nodeCommon.find("input[name='startTime']").val();var    endDate=nodeCommon.find("input[name='endTime']").val();var    status=nodeCommon.find("input[name='status']").val();var  delayNum=nodeCommon.find("input[name='delayNum']").val();//调用方法请求后台;reportExcel(index+1,picBaseCode,unitNames,startDate,endDate,status,delayNum);
}//封装待导出Excel的参数
function reportExcel(reportType,picBaseCode,unitNames,startDate,endDate,status,delayNum){var url=webCfg.servePath +"/reportForm/reportExcel";var params = {"reportType":reportType,"picBaseCode":picBaseCode,"unitNames":encodeURI(unitNames),"startDate":startDate,"endDate":endDate,"status":encodeURI(status),"delayNum":encodeURI(delayNum)        };httpPost(url, params);
}//发送POST请求跳转到指定页面
function httpPost(URL, PARAMS) {var temp = document.createElement("form");temp.action = URL;temp.method = "post";temp.style.display = "none";for (var x in PARAMS) {var opt = document.createElement("textarea");opt.name = x;opt.value = PARAMS[x];temp.appendChild(opt);}document.body.appendChild(temp);temp.submit();return temp;
}

二、后台

    /*** 导出报表** @return*/@RequestMapping(value = "/reportExcel", method = RequestMethod.POST)public Object getReportExcel(HttpServletRequest request, HttpServletResponse             response) throws Exception {fileName = "项目统计表.xlsx";OutputStream os=response.getOutputStream();setFileName(request, response, fileName);//设置导出文件标题及编码// 第一步，创建一个HSSFWorkbook，对应一个Excel文件// 创建Excel工作薄Workbook book = null;try {book = new XSSFWorkbook();//excell2007} catch (Exception ex) {book = new HSSFWorkbook();//excell2003}// 第二步，在workbook中添加一个sheet,对应Excel文件中的sheetSheet sheet = book.createSheet(fileName);//调用方法获取统计报表内的表格数据(此处省略，需自行补充，同前台echarts统计图数据源)@SuppressWarnings("unchecked")Map<String, Object> result = (Map<String, Object>) taskTotalForm(request);String[] xAxis = (String[]) result.get("xAxis");@SuppressWarnings("unchecked")List<Integer[]> series = (List<Integer[]>) result.get("series");// 第三步,设置标题和表头;Row row = sheet.createRow(0);// 创建第一行,设置表的标题;row.setHeightInPoints(36);//设置行的高度是34个点Cell cell = row.createCell(0);cell.setCellValue(headTitle);sheet.addMergedRegion(new CellRangeAddress(0, 0, 0, cols - 1));//第一行跨表所有列;// 第二行为表头行String title = "";Row row1 = sheet.createRow(1);// 创建第2行row1.setHeightInPoints(22);//设置表头行的高度是20个点for (int i = 0; i < 4; i++) {Cell cell = row1.createCell(i);cell.setCellType(HSSFCell.CELL_TYPE_STRING);if (i == 0) {title = "月份";}if (i == 1) {title = "时间节点";}if (i == 2) {title = "计划完成项";}if (i == 3) {title = "实际完成项";}cell.setCellValue(title);}int start = 2;//根据各一级任务的分解任务数循环向单元格填充数据;for (int i = 0; i < xAxis.length; i++) {Row row = sheet.createRow(start + i);Cell cell0 = row.createCell(0);Cell cell1 = row.createCell(1);Cell cell2 = row.createCell(2);Cell cell3 = row.createCell(3);cell0.setCellValue(xAxis[i]);cell1.setCellValue(xAxis[i]);cell2.setCellValue(series.get(0)[i]);cell3.setCellValue(series.get(1)[i]);}//生成统计图图片String imgUrl = request.getParameter("picBaseCode");if (!imgUrl.isEmpty()) {String[] imgUrlArr = imgUrl.split("base64,");//拆分base64编码后部分byte[] buffer = new BASE64Decoder().decodeBuffer(imgUrlArr[1]);//获取项目运行目录的路径:以下是request.getRealPath()的代替方法String picPath = request.getSession().getServletContext().getRealPath("static/app/appkmbgszh/images" + fileName + ".png");File file = new File(picPath);//图片文件try {//生成图片OutputStream out = new FileOutputStream(file);//图片输出流out.write(buffer);out.flush();//清空流out.close();//关闭流// 将图片写入流中ByteArrayOutputStream outStream = new ByteArrayOutputStream();BufferedImage bufferImg = ImageIO.read(file);ImageIO.write(bufferImg, "PNG", outStream);// 利用HSSFPatriarch或XSSFDrawing将图片写入EXCELDrawing patri = sheet.createDrawingPatriarch();//偏移量  这个有点恶心， 这个单位直接以万 计， 10000以下 基本设了等于没设。原因不明 ，操作2003 的 HSSF 是正常的比例  ClientAnchor anchor = new XSSFClientAnchor(30 * 10000, 0, 100, 100, 5, 1, 18, 22);patri.createPicture(anchor, book.addPicture(outStream.toByteArray(), XSSFWorkbook.PICTURE_TYPE_PNG));// 写入数据 把相应的Excel 工作簿存盘book.write(os);book.close();os.close();} catch (Exception ex) {ex.printStackTrace();}if (file.exists()) {file.delete();//删除图片}}}/*** 设置导出文件名,并处理编码问题;* @param request* @param response* @param name* @throws UnsupportedEncodingException*/public void setFileName(HttpServletRequest request, HttpServletResponse response, String name)throws UnsupportedEncodingException {String agent = request.getHeader("USER-AGENT");if (null != agent && -1 != agent.indexOf("MSIE") || null != agent && -1 != agent.indexOf("Trident")) {// IEname = java.net.URLEncoder.encode(name, "UTF8");} else if (null != agent && -1 != agent.indexOf("Mozilla")) {// 火狐,chrome等name = new String(name.getBytes("UTF-8"), "iso-8859-1");}response.setHeader("Content-disposition", "attachment; filename=" + name);}

三、说明

关于HSSFClientAnchor(dx1,dy1,dx2,dy2,col1,row1,col2,row2)的参数，有必要在这里说明一下：
dx1：起始单元格的x偏移量，如例子中的255表示直线起始位置距A1单元格左侧的距离；
dy1：起始单元格的y偏移量，如例子中的125表示直线起始位置距A1单元格上侧的距离；
dx2：终止单元格的x偏移量，如例子中的1023表示直线起始位置距C3单元格左侧的距离；
dy2：终止单元格的y偏移量，如例子中的150表示直线起始位置距C3单元格上侧的距离；
col1：起始单元格列序号，从0开始计算；
row1：起始单元格行序号，从0开始计算，如例子中col1=0,row1=0就表示起始单元格为A1；
col2：终止单元格列序号，从0开始计算；
row2：终止单元格行序号，从0开始计算，如例子中col2=2,row2=2就表示起始单元格为C3；

POI导出echarts统计报表到Excel相关推荐

使用POI导出百万级数据到excel的解决方案
使用POI导出百万级数据到excel的解决方案参考文章: (1)使用POI导出百万级数据到excel的解决方案 (2)https://www.cnblogs.com/hxun/p/11419006. ...
JAVA使用POI导出Word文档和Excel文档
导包注意:POI包的版本,不同版本poi导出API会有差别!!!! <dependency><groupId>org.apache.poi</groupId>&l ...
JS导出Echarts图标数据为Excel表格
开发需求需要在Echarts图表右上角添加一个按钮,将图表数据下载为Excel,下面获取到所有echarts数据后通过js手动对数据进行排列和换行的方式完成了需求 HTML结构: <templa ...
java 使用POI导出复杂excel表格，通过浏览器下载
pom.xml依赖  <dependency><groupId>org.apache.poi</groupId&g ...
JAVA导出exls时报oom_如何实现导出百万条数据到EXCEL中不报OOM异常？
Java项目中使用POI导出百万条数据到Excel中,但是会出现内存溢出异常. 存在以下问题需要考虑POI导出条数限制6w+ 数据量大的话会导致内存溢出现在的做法是每6w条数据做一次分割,创建一个新 ...
java读取百万条记录出错_如何实现导出百万条数据到EXCEL中不报OOM异常？
Java项目中使用POI导出百万条数据到Excel中,但是会出现内存溢出异常. 存在以下问题需要考虑POI导出条数限制6w+ 数据量大的话会导致内存溢出现在的做法是每6w条数据做一次分割,创建一个新 ...
java统计报表，导出excel，自定义存储目录
java统计报表,导出excle,自定义存储目录做一个将查询出来的数据写入excel,并且点击导出按钮是,可以选择导出路径 **直接上完整代码 1.utils工具类,里面可以自己设置样式,详细看注释 ...
java 使用poi导出excel，可控制固定前2列固定标头排版，带统计数据格式的
使用poi导出排版漂亮的excel文件 html代码: <button class="btn btn-link" ng-model="exportExcel&quo ...
Java和poi导出excel报表
一:poi jar下载地址:点击打开链接: 二:工程截图: 三:运行效果截图: 四:源代码: Student.java: package com.poi.bean;import java.util.D ...
POI导出Excel(用户自己选择路径)
项目开发的后台管理系统需要对一些数据进行统计,此时也有可能导出一些报表信息等.本人开发中遇到了一些统计信息的Excel导出. 之前在网上查到一些写好的POI导出Excel导出工具类,但是好多不能使用或 ...

POI导出echarts统计报表到Excel