Echart官网定制js,选择需要的模块生成echart-min.js
1.前端
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.js"></script> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style=" 600px;height:400px;"></div> <input type="button" id="download" value="下载"> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, animation: false, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; option2 = { animation: false, title : { text: '某站点用户访问来源', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, series : [ { name: '访问来源', type: 'pie', radius : '55%', center: ['50%', '60%'], data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); // 获取base64图片 var picBase64Info = myChart.getDataURL(); //创建form提交图片数据 var postDownLoadFile = function (options) { var config = $.extend(true, { method: 'post' }, options); var $iframe = $('<iframe id="down-file-iframe" />'); var $form = $('<form target="down-file-iframe" method="' + config.method + '" />'); $form.attr('action', config.url); //图片 $form.append('<input type="hidden" name="base64Info" value="' + config.data + '" />'); $iframe.append($form); $(document.body).append($iframe); $form[0].submit(); $iframe.remove(); } //触发下载功能 $("#download").on('click', function() { var param={}; postDownLoadFile({ url:"${BASE_PATH}/admin/dataanalyze/exportPDF", data:picBase64Info, method:'post' }); }); </script> </body> </html>
2.后端
/** * * @throws DocumentException * @throws Exception * @Description 导出PDF * @category * @author 张银彪 * @date 2019年6月27日 上午9:26:38 */ public void exportPDF() throws DocumentException, Exception { Document document = new Document(PageSize.A4, 50, 50, 50, 50); // 创建文档 // 大小 try { String path = getSession().getServletContext().getRealPath(Preference.DOWN_DIR); // 基础路径 PdfWriter writer = PdfWriter.getInstance(document, new FileOutputStream(path + "/" + System.currentTimeMillis()+".pdf")); // 保存路径 Rectangle rect = new Rectangle(36, 54, 559, 788); rect.setBorderColor(BaseColor.BLACK); writer.setBoxSize("art", rect); HeaderFooter header1 = new HeaderFooter(); // 设置页脚 writer.setPageEvent(header1); Font font = PdfTool.setChineseFont(); // 正文字体 File fpath = new File(PathKit.getWebRootPath() + Preference.PDF_FONT_PATH); BaseFont bfChinese = BaseFont.createFont(fpath.getPath(), BaseFont.IDENTITY_H, BaseFont.EMBEDDED); Font font2 = new Font(bfChinese, 8, Font.NORMAL); // 数据表字体 Font fontRed = new Font(bfChinese, 8, Font.NORMAL, new BaseColor(255, 0, 0)); // 数据表示异常字体（红色） document.open();// 打开文档 // 基本信息 PdfPTable header = new PdfPTable(4); header.setSpacingBefore(5); header.setSpacingAfter(5); PdfPCell baseinfoheader = new PdfPCell(); // 设置抬头 Paragraph paragraph = new Paragraph("数据图表", font); paragraph.setAlignment(1); paragraph.setSpacingBefore(25); baseinfoheader.setColspan(4); baseinfoheader.setBackgroundColor(new BaseColor(185, 185, 185)); baseinfoheader.setUseAscender(true); baseinfoheader.setVerticalAlignment(Element.ALIGN_MIDDLE); baseinfoheader.addElement(paragraph); header.addCell(baseinfoheader); // 插入一行--展示通道名称 PdfPCell insert_h1 = new PdfPCell(new Phrase("图表", font)); //header.addCell(insert_h1); String imgUrl = getRequest().getParameter("base64Info"); String[] imgUrlArr = imgUrl.split("base64,");//拆分base64编码后部分 // byte[] buffer = new BASE64Decoder().decodeBuffer(imgUrlArr[1]); String string = imgUrlArr[1]; byte[] buffer= Base64.getDecoder().decode(string); PdfPCell insert_h2 = new PdfPCell(Image.getInstance(buffer)); insert_h2.setColspan(4); header.addCell(insert_h2); PdfPTable mheader = new PdfPTable(4); mheader.setSpacingBefore(5); mheader.setSpacingAfter(5); PdfPTable mytable = new PdfPTable(1); // 插入图片 document.add(header); // 文件头部 document.add(mytable); // 历史记录列表头部 document.newPage(); // 前面通道结束后 另起一页显示新通道 } catch (Exception e) { e.printStackTrace(); } document.close(); }
3.后面补充SpringBoot的代码