新添加报表分析功能的前端实现:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>上传 Excel 文件并绘制图表</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"> <style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; /* Light gray background */ margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); display: flex; max-width: 800px; width: 100%; overflow: hidden; } .left-section { flex: 1; padding-right: 20px; border-right: 1px solid #ccc; } .right-section { flex: 2; padding-left: 20px; background-color: #f5f5f5; /* Light gray background for results area */ border-radius: 8px; padding: 20px; } .left-section h2, .right-section h2 { text-align: center; margin-bottom: 20px; } .file-input { display: none; } .upload-btn { display: block; width: 100%; background-color: #8e44ad; /* Purple button */ color: #fff; border: none; padding: 10px 20px; cursor: pointer; border-radius: 4px; font-size: 16px; transition: background-color 0.3s; margin-top: 10px; } .upload-btn:hover { background-color: #6c3483; /* Darker shade on hover */ } #fileLabel { display: inline-block; background-color: rgba(142, 68, 173, 0.5); /* Light purple file input */ color: #fff; border: none; padding: 10px 20px; cursor: pointer; border-radius: 4px; font-size: 16px; transition: background-color 0.3s; margin-top: 10px; } #fileLabel:hover { background-color: rgba(142, 68, 173, 0.8); /* Darker shade on hover */ } #charts { margin-top: 20px; text-align: center; } </style> </head> <body> <div class="container"> <div class="left-section"> <h2>上传 Excel 文件</h2> <form id="uploadForm" enctype="multipart/form-data"> <label id="fileLabel" for="fileInput">选择文件</label> <input type="file" id="fileInput" class="file-input" name="file" accept=".xlsx"> <br><br> <button type="button" class="upload-btn" οnclick="uploadFile()">上传文件</button> </form> </div> <div class="right-section"> <h2>结果显示区域</h2> <div id="charts"></div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script> function uploadFile() { var formData = new FormData(); var fileInput = document.getElementById('fileInput').files[0]; formData.append('file', fileInput); fetch('/upload', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => { console.log(data); var chartsDiv = document.getElementById('charts'); chartsDiv.innerHTML = ''; var profitChart = document.createElement('canvas'); profitChart.id = 'profitChart'; chartsDiv.appendChild(profitChart); var revenueChart = document.createElement('canvas'); revenueChart.id = 'revenueChart'; chartsDiv.appendChild(revenueChart); var profitMarginChart = document.createElement('canvas'); profitMarginChart.id = 'profitMarginChart'; chartsDiv.appendChild(profitMarginChart); drawProfitAndRevenueChart(data); drawProfitMarginChart(data); }) .catch(error => console.error('Error:', error)); } function drawProfitAndRevenueChart(data) { var dates = data.dates; var profit = data.profit; var revenue = data.revenue; var ctx = document.getElementById('profitChart').getContext('2d'); new Chart(ctx, { type: 'line', data: { labels: dates, datasets: [{ label: '净利润', data: profit, borderColor: 'blue', backgroundColor: 'rgba(54, 162, 235, 0.2)', /* Original color */ fill: true }, { label: '营业收入', data: revenue, borderColor: 'green', backgroundColor: 'rgba(75, 192, 192, 0.2)', /* Original color */ fill: true }] }, options: { responsive: true, title: { display: true, text: '净利润和营业收入趋势' }, scales: { xAxes: [{ ticks: { maxRotation: 45, minRotation: 45 } }], yAxes: [{ ticks: { beginAtZero: true } }] } } }); } function drawProfitMarginChart(data) { var dates = data.dates; var profitMargin = data.profitMargin; var ctx = document.getElementById('profitMarginChart').getContext('2d'); new Chart(ctx, { type: 'line', data: { labels: dates, datasets: [{ label: '净利润率', data: profitMargin, borderColor: 'red', backgroundColor: 'rgba(255, 99, 132, 0.2)', /* Original color */ fill: true }] }, options: { responsive: true, title: { display: true, text: '净利润率变化' }, scales: { xAxes: [{ ticks: { maxRotation: 45, minRotation: 45 } }], yAxes: [{ ticks: { beginAtZero: true } }] } } }); } </script> </body> </html>