Book_system/app/static/js/book_ranking.js

// app/static/js/book_ranking.js
document.addEventListener('DOMContentLoaded', function() {
    const timeRangeSelect = document.getElementById('time-range');
    const limitSelect = document.getElementById('limit-count');
    let rankingChart = null;

    // 初始加载
    loadRankingData();

    // 添加事件监听器
    timeRangeSelect.addEventListener('change', loadRankingData);
    limitSelect.addEventListener('change', loadRankingData);

    function loadRankingData() {
        const timeRange = timeRangeSelect.value;
        const limit = limitSelect.value;

        // 显示加载状态
        document.getElementById('ranking-table-body').innerHTML = `
            <tr class="loading-row">
                <td colspan="5">加载中...</td>
            </tr>
        `;

        // 调用API获取数据
        fetch(`/statistics/api/book-ranking?time_range=${timeRange}&limit=${limit}`)
            .then(response => response.json())
            .then(data => {
                // 更新表格
                updateRankingTable(data);
                // 更新图表
                updateRankingChart(data);
            })
            .catch(error => {
                console.error('加载排行数据失败:', error);
                document.getElementById('ranking-table-body').innerHTML = `
                    <tr class="error-row">
                        <td colspan="5">加载数据失败，请稍后重试</td>
                    </tr>
                `;
            });
    }

    function updateRankingTable(data) {
        const tableBody = document.getElementById('ranking-table-body');

        if (data.length === 0) {
            tableBody.innerHTML = `
                <tr class="no-data-row">
                    <td colspan="5">暂无数据</td>
                </tr>
            `;
            return;
        }

        let tableHtml = '';

        data.forEach((book, index) => {
            tableHtml += `
                <tr>
                    <td class="rank">${index + 1}</td>
                    <td>
                        <img src="${book.cover_url || '/static/images/book-placeholder.jpg'}" alt="${book.title}">
                    </td>
                    <td>${book.title}</td>
                    <td>${book.author}</td>
                    <td class="borrow-count">${book.borrow_count}</td>
                </tr>
            `;
        });

        tableBody.innerHTML = tableHtml;
    }

    function updateRankingChart(data) {
        // 销毁旧图表
        if (rankingChart) {
            rankingChart.destroy();
        }

        if (data.length === 0) {
            return;
        }

        // 准备图表数据
        const labels = data.map(book => book.title);
        const borrowCounts = data.map(book => book.borrow_count);

        // 创建图表
        const ctx = document.getElementById('ranking-chart').getContext('2d');
        rankingChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: '借阅次数',
                    data: borrowCounts,
                    backgroundColor: 'rgba(54, 162, 235, 0.6)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: '借阅次数'
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: '图书'
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    },
                    title: {
                        display: true,
                        text: '热门图书借阅排行'
                    }
                }
            }
        });
    }
});