当前位置：首页 > 行业动态 > 正文

html报表页面模板

admin
行业动态
2025-05-01
2267

报表名称数值示例100

HTML报表页面模板

页面头部信息

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">销售数据报表</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        h1 {
            text-align: center;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        th {
            background-color: #f2f2f2;
            text-align: left;
        }
        .chart {
            margin-top: 30px;
            text-align: center;
        }
        canvas {
            max-width: 100%;
        }
    </style>
</head>

报表主体内容

（一）基本信息

<body>
    <h1>XX公司2024年第一季度销售数据报表</h1>
    <p>报表日期范围：2024-01-01 至 2024-03-31</p>
    <p>部门：销售部</p>
    <p>负责人：张经理</p>

（二）数据表格

 <table>
        <thead>
            <tr>
                <th>项目</th>
                <th>详情</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>总销售额</td>
                <td>¥1,200,000</td>
            </tr>
            <tr>
                <td>新客户数量</td>
                <td>85家</td>
            </tr>
            <tr>
                <td>产品A销量</td>
                <td>320件</td>
            </tr>
            <tr>
                <td>产品B销量</td>
                <td>180件</td>
            </tr>
            <tr>
                <td>退货率</td>
                <td>3.2%</td>
            </tr>
        </tbody>
    </table>

（三）图表展示区

 <div class="chart">
        <h2>销售趋势图</h2>
        <canvas id="salesTrendChart" width="600" height="400"></canvas>
    </div>

页脚信息

 <footer style="text-align: center; margin-top: 40px; font-size: 12px;">
        <p>版权所有 © XX公司 2024年</p>
    </footer>
</body>
</html>

图表脚本（需配合Chart.js库）

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // 获取Canvas元素
    const ctx = document.getElementById('salesTrendChart').getContext('2d');
    // 创建柱状图数据
    const chartData = {
        labels: ['1月', '2月', '3月'],
        datasets: [{
            label: '销售额（万元）',
            data: [40, 35, 45],
            backgroundColor: 'rgba(75, 192, 192, 0.6)'
        }]
    };
    // 初始化图表
    new Chart(ctx, {
        type: 'bar', // 可改为line/pie等类型
        data: chartData,
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: '金额（万元）'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: '月份'
                    }
                }
            }
        }
    });
</script>