@
目錄- 前言
- 一、使用highcharts前后端互動展示圖表，及使用報表匯出
- 二、實作思路
- 1.圖表可以選擇echarts、highcharts，我們這里選擇highcharts（echarts使用差不多），使用很簡潔方便，并自帶匯出圖表、列印等功能，
- 2.報表匯出我們選擇apache的HSSFWorkbook進行報表匯出，
- 三、實作步驟
- 1.ElementUI代碼
- 2.js代碼：
- 2.1 首先要使用mounted鉤子函式掛載呼叫圖表及報表方法：
- 2.2 然后要創建methods呼叫圖表方法及報表方法
- 2.4 著重要講一點：下面是直接在報表多生成一行并計算總票數
- 2.5 匯出報表方法
- 3.后端HSSFWorkbook的java代碼
- 四、最后的頁面如下：
提示：本文僅供學習交流，請勿用于非法活動！
前言
本文大概內容：
在官網展現圖表及報表（含匯出）
一、使用highcharts前后端互動展示圖表，及使用報表匯出
如下圖，我們在首頁如何將折線圖、柱狀圖結合報表，并實作根據不同的倉庫實時重繪不同的資料，最后可以選擇匯出圖表及報表，
二、實作思路
1.圖表可以選擇echarts、highcharts，我們這里選擇highcharts（echarts使用差不多），使用很簡潔方便，并自帶匯出圖表、列印等功能，
2.報表匯出我們選擇apache的HSSFWorkbook進行報表匯出，
三、實作步驟
1.ElementUI代碼
我們使用
代碼如下：
// 前面公司的搜索框省略....
<el-row>
<el-col :span="24">
<div >
<div style="height: 270px" id="container11"></div>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="16">
<div >
<div style="height: 300px" id="container13"></div>
</div>
</el-col>
<el-col :span="1"><div> </div></el-col>
<el-col :span="6">
<div >
<div style="height: 320px">
<el-table ref="table" :data="https://www.cnblogs.com/folyh/archive/2022/07/21/tableData" border size="mini"
:summary-method="getSummaries" show-summary>
<el-table-column prop="twoTypeName" label="菜類名稱" height="10px"></el-table-column>
<el-table-column prop="quantity" label="數量" height="10px"></el-table-column>
<el-table-column prop="tickets" label="小票數" height="10px"></el-table-column>
</el-table>
</div>
</div>
</el-col>
<el-col :span="1"><div> </div></el-col>
</el-row>
2.js代碼：
2.1 首先要使用mounted鉤子函式掛載呼叫圖表及報表方法：
mounted() {
this.moreChart1();
this.moreChart3();
this.getDayTicketsQuantity();
},
2.2 然后要創建methods呼叫圖表方法及報表方法
methods: {
// 折線圖方法
moreChart1(warehouseid) {
// 這里帶上倉庫id，到時就可以根據不同倉庫切換資料
var param = {"warehouseid":warehouseid};
axios.get("url1",{params:param})
.then(function (r) {
var list = r.data.data;
console.log(list);
let titles = [];
let values = [];
// 將后端獲得的資料放入折線圖的下面X、Y軸定義的變數中
for(let i=0;i<list.length;i++){
titles[i] = list[i].createDay;
values[i] = list[i].totalDayTickets;
}
var chart = Highcharts.chart('container11', {
chart: {
type: 'line'
},
title: {
text: '每日小票總數'
},
subtitle: {
text: '每日小票總數'
},
xAxis: {
categories: titles
},
yAxis: {
title: {
text: '小票數(張)'
}
},
plotOptions: {
line: {
dataLabels: {
// 開啟資料標簽
enabled: true
},
// 關倍訓鼠跟蹤，對應的提示框、點擊事件會失效
enableMouseTracking: true
}
},
series: [{
name: '',
data: values
},]
});
})
},
// 柱狀圖方法
moreChart3(warehouseid) {
var param = {"warehouseid":warehouseid};
axios.get("url2",{params:param})
.then(r=>{
var list = r.data.data;
console.log(list);
let titles = [];
let values = [];
for(let i=0; i<list.length;i++){
titles[i] = list[i].twoTypeName;
values[i] = list[i].tickets;
}
var chart = Highcharts.chart('container13',{
chart: {
type: 'column'
},
title: {
text: '今日小票數'
},
subtitle: {
text: '今日小票數'
},
xAxis: {
categories: titles,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: '小票數(張)'
}
},
tooltip: {
// head + 每個 point + footer 拼接成完整的 table
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:1f}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
borderWidth: 0
}
},
series: [{
name: '',
data: values
}]
});
})
},
// 報表方法
getDayTicketsQuantity(warehouseid){
this.doGetData(url3,{warehouseid:warehouseid},function (r) {
if(r.success){
this.tableData = https://www.cnblogs.com/folyh/archive/2022/07/21/r.data;
}
})
},
// 這里會根據頁面上選擇不同的倉庫后觸發該方法，圖表和報表資料就會跟著改變
getChangeData(warehouseid){
this.moreChart1(warehouseid);
this.moreChart3(warehouseid);
this.getDayTicketsQuantity(warehouseid);
},
}
});
2.4 著重要講一點：下面是直接在報表多生成一行并計算總票數
getSummaries: function (param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
var flag = false;
if(index === 0){
sums[index] = '合計';
return;
}
if( index != 2){
sums[index] = '';
return;
}
const values = data.map(item => Number(item[column.property]));
if(!values.every(value =https://www.cnblogs.com/folyh/archive/2022/07/21/> isNaN(value))){
sums[index] = values.reduce((prev,curr) => {
const value = Number(curr);
if(!isNaN(value)){
return prev + curr;
} else {
return prev;
}
}, 0);
}
if(index === 2){
sums[index] = sums[index].toFixed(0);
}
});
return sums;
},
2.5 匯出報表方法
function ticketsQuantityExportExcel(){
var str="";
if(app.filterParams.warehouseid!=null){
str+="warehouseid="+app.filterParams.warehouseid;
}
window.location.href = "https://www.cnblogs.com/folyh/archive/2022/07/21/url3"+str;
}
3.后端HSSFWorkbook的java代碼
@RequestMapping("/ticketsQuantityExportExcel")
@ResponseBody
public void ticketsQuantityExportExcel(HttpServletResponse response,String warehouseid){
try{
String docName = "今日小票及數量";
OutputStream outputStream = response.getOutputStream();
response.setContentType("application/vnd_ms-excel");
response.setHeader("Content-disposition","attachment;filename="
+new String(docName.getBytes("gb2312"),"ISO8859-1")+".xls");
List<DayTicketsQuantityDto> list = reportService.listDayTicketsQuantity(warehouseid);
ticketsQuantityExcelOutPut(list,outputStream,docName);
outputStream.flush();
outputStream.close();
} catch (Exception e) {
logger.error("匯出失敗！params:" + warehouseid, e);
}
}
public void ticketsQuantityExcelOutPut(List<DayTicketsQuantityDto> list, OutputStream ouputStream,
String docName) throws IOException {
// 初始化表格及字體邊框
HSSFWorkbook wb = new HSSFWorkbook();
HSSFSheet sheet = wb.createSheet(docName);
HSSFRow row = null;
HSSFCell cell = null;
sheet.setDefaultRowHeightInPoints(20);
row = sheet.createRow((int) 0);
HSSFCellStyle style = wb.createCellStyle();
HSSFFont font1 = wb.createFont();
font1.setFontName("宋體");
font1.setFontHeightInPoints((short) 14);
font1.setBoldweight(HSSFFont.BOLDWEIGHT_BOLD);
style.setAlignment(HSSFCellStyle.ALIGN_CENTER);
style.setVerticalAlignment(HSSFCellStyle.VERTICAL_CENTER);
style.setBorderBottom(HSSFCellStyle.BORDER_THIN); // 下邊框
style.setBorderLeft(HSSFCellStyle.BORDER_THIN);// 左邊框
style.setBorderTop(HSSFCellStyle.BORDER_THIN);// 上邊框
style.setBorderRight(HSSFCellStyle.BORDER_THIN);// 右邊框
style.setFillPattern(HSSFCellStyle.SOLID_FOREGROUND);
style.setFillForegroundColor(IndexedColors.WHITE.getIndex());
style.setFont(font1);
style.setAlignment(HSSFCellStyle.ALIGN_CENTER);
HSSFFont font2 = wb.createFont();
font2.setFontName("宋體");
font2.setFontHeightInPoints((short) 12);
HSSFCellStyle ji = wb.createCellStyle();
ji.setFillPattern(HSSFCellStyle.SOLID_FOREGROUND);
ji.setFillForegroundColor(IndexedColors.WHITE.getIndex());
ji.setAlignment(HSSFCellStyle.ALIGN_CENTER);
ji.setVerticalAlignment(HSSFCellStyle.VERTICAL_CENTER);
ji.setBorderBottom(HSSFCellStyle.BORDER_THIN); // 下邊框
ji.setBorderLeft(HSSFCellStyle.BORDER_THIN);// 左邊框
ji.setBorderTop(HSSFCellStyle.BORDER_THIN);// 上邊框
ji.setBorderRight(HSSFCellStyle.BORDER_THIN);// 右邊框
ji.setFillPattern(HSSFCellStyle.SOLID_FOREGROUND);
ji.setFont(font2);
// 增加表格表頭倉庫名稱及報表日期（報表里面沒有）
DayTicketsQuantityDto dto = list.get(0);
if(dto!=null){
row = sheet.createRow((int)0);
cell = row.createCell(0);
cell.setCellValue("倉庫名稱");
cell.setCellStyle(style);
sheet.autoSizeColumn(0);
sheet.setColumnWidth(0,20*356);
cell = row.createCell(1);
cell.setCellValue(dto.getWarehouseName());
cell.setCellStyle(style);
sheet.autoSizeColumn(0);
sheet.setColumnWidth(0, 20 * 356);
row = sheet.createRow((int) 1);
cell = row.createCell(0);
cell.setCellValue("報表日期");
cell.setCellStyle(style);
sheet.autoSizeColumn(0);
sheet.setColumnWidth(0, 20 * 356);
cell = row.createCell(1);
cell.setCellValue(dto.getCreateDay());
cell.setCellStyle(style);
sheet.autoSizeColumn(0);
sheet.setColumnWidth(0, 20 * 356);
}
// 正式構建表格正文表格并將查詢的資料填充進去
String[] excelHeader = {"菜類名稱","數量","小票數"};
row = sheet.createRow((int)2);
for (int i = 0; i < excelHeader.length; i++) {
cell = row.createCell(i);
cell.setCellValue(excelHeader[i]);
cell.setCellStyle(style);
sheet.autoSizeColumn(i);
sheet.setColumnWidth(i, 20 * 356);
}
if (list != null && list.size() > 0) {
Integer totalTickets = 0;
for (int i = 0; i < list.size(); i++) {
row = sheet.createRow(i + 3);
DayTicketsQuantityDto trn = list.get(i);
if (trn != null) {
HSSFCell cell1 = row.createCell(0);
if (trn.getTwoTypeName() != null) {
cell1.setCellValue(trn.getTwoTypeName());
}
HSSFCell cell2 = row.createCell(1);
if (trn.getQuantity() != null) {
cell2.setCellValue(Integer.valueOf(trn.getQuantity()));
}
HSSFCell cell3 = row.createCell(2);
if (trn.getTickets() != null) {
cell3.setCellValue(Integer.valueOf(trn.getTickets()));
totalTickets += Integer.valueOf(trn.getTickets());
}
cell1.setCellStyle(ji);
cell2.setCellStyle(ji);
cell3.setCellStyle(ji);
}
}
// 增加末行合計一行
row = sheet.createRow(list.size() + 3);
HSSFCell cell1 = row.createCell(0);
cell1.setCellValue("合計");
HSSFCell cell2 = row.createCell(1);
cell2.setCellValue("");
HSSFCell cell3 = row.createCell(2);
cell3.setCellValue(totalTickets);
cell1.setCellStyle(ji);
cell2.setCellStyle(ji);
cell3.setCellStyle(ji);
}
wb.write(ouputStream);
}
}
四、最后的頁面如下：
隨心所往，看見未來，Follow your heart，see night！
歡迎點贊、關注、留言，一起學習、交流！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/499950.html
標籤：其他
上一篇：記錄--WebSocket 原理