对报表分析功能的前端页面进行修改,并与其他功能合并。
修改后的前端代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>上传 Excel 文件并绘制图表</title> <!-- 引入 Normalize.css 以保证在不同浏览器中的一致性 --> <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; /* 浅灰色背景 */ margin: 0; padding: 0; display: flex; /* 使用 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; 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; 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; } /* 文件选择按钮 */ #fileLabel { display: inline-block; background-color: rgba(142, 68, 173, 0.5); 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); } /* 图表区域 */ #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> <!-- 引入 Chart.js 库 --> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script> // 文件上传处理函数 function uploadFile() { var formData = new FormData(); // 创建 FormData 对象 var fileInput = document.getElementById('fileInput').files[0]; // 获取文件输入框中的文件 formData.append('file', fileInput); // 将文件添加到 FormData 中的 'file' 键 // 发起 POST 请求到服务器端 '/upload' 接口 fetch('/upload', { method: 'POST', body: formData // 将 FormData 对象作为请求体 }) .then(response => response.json()) // 处理响应,解析为 JSON 格式 .then(data => { console.log(data); // 输出响应数据到控制台 var chartsDiv = document.getElementById('charts'); // 获取图表区域元素 chartsDiv.innerHTML = ''; // 清空图表区域内容 // 创建净利润图表 canvas 元素 var profitChart = document.createElement('canvas'); profitChart.id = 'profitChart'; // 设置 ID chartsDiv.appendChild(profitChart); // 添加到图表区域 // 创建营业收入图表 canvas 元素 var revenueChart = document.createElement('canvas'); revenueChart.id = 'revenueChart'; // 设置 ID chartsDiv.appendChild(revenueChart); // 添加到图表区域 // 创建净利润率图表 canvas 元素 var profitMarginChart = document.createElement('canvas'); profitMarginChart.id = 'profitMarginChart'; // 设置 ID 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; // 获取营业收入数据 // 获取净利润图表 canvas 元素的上下文 var ctx = document.getElementById('profitChart').getContext('2d'); new Chart(ctx, { type: 'line', // 折线图类型 data: { labels: dates, // X 轴标签为日期 datasets: [{ label: '净利润', // 数据集标签 data: profit, // 数据集数据 borderColor: 'blue', backgroundColor: 'rgba(54, 162, 235, 0.2)', fill: true }, { label: '营业收入', // 第二个数据集标签 data: revenue, // 第二个数据集数据 borderColor: 'green', backgroundColor: 'rgba(75, 192, 192, 0.2)', fill: true }] }, options: { responsive: true, // 图表响应式 title: { display: true, text: '净利润和营业收入趋势' // 图表标题 }, scales: { xAxes: [{ ticks: { maxRotation: 45, // X 轴标签最大旋转角度 minRotation: 45 // X 轴标签最小旋转角度 } }], yAxes: [{ ticks: { beginAtZero: true // Y 轴从零开始 } }] } } }); } // 绘制净利润率变化图函数 function drawProfitMarginChart(data) { var dates = data.dates; // 获取日期数据 var profitMargin = data.profitMargin; // 获取净利润率数据 // 获取净利润率图表 canvas 元素的上下文 var ctx = document.getElementById('profitMarginChart').getContext('2d'); new Chart(ctx, { type: 'line', // 折线图类型 data: { labels: dates, // X 轴标签为日期 datasets: [{ label: '净利润率', // 数据集标签 data: profitMargin, // 数据集数据 borderColor: 'red', backgroundColor: 'rgba(255, 99, 132, 0.2)', fill: true }] }, options: { responsive: true, // 图表响应式 title: { display: true, text: '净利润率变化' // 图表标题 }, scales: { xAxes: [{ ticks: { maxRotation: 45, // X 轴标签最大旋转角度 minRotation: 45 // X 轴标签最小旋转角度 } }], yAxes: [{ ticks: { beginAtZero: true // Y 轴从零开始 } }] } } }); } </script> </body> </html>