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="width: 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的代碼