diff --git a/plugins/stats_dashboard/templates/robot_management.html b/plugins/stats_dashboard/templates/robot_management.html
index 4963e69..c4dcbf0 100644
--- a/plugins/stats_dashboard/templates/robot_management.html
+++ b/plugins/stats_dashboard/templates/robot_management.html
@@ -464,9 +464,6 @@
                         return;
                     }
                     
-                    // 清空容器
-                    container.innerHTML = '';
-                    
                     // 准备数据
                     const labels = data.dates || [];
                     const messageData = (data.counts || []).map(count => parseInt(count) || 0);
@@ -476,16 +473,77 @@
                         return;
                     }
                     
-                    // 创建表格显示数据
+                    // 销毁之前的图表实例（如果存在）
+                    if (this.charts.trendChart) {
+                        this.charts.trendChart.destroy();
+                    }
+                    
+                    // 创建canvas元素
+                    container.innerHTML = '<canvas id="messageChart" width="100%" height="300"></canvas>';
+                    const ctx = document.getElementById('messageChart').getContext('2d');
+                    
+                    // 使用Chart.js创建图表
+                    this.charts.trendChart = new Chart(ctx, {
+                        type: 'bar',
+                        data: {
+                            labels: labels,
+                            datasets: [{
+                                label: '消息数量',
+                                data: messageData,
+                                backgroundColor: 'rgba(75, 192, 192, 0.5)',
+                                borderColor: 'rgba(75, 192, 192, 1)',
+                                borderWidth: 1
+                            }]
+                        },
+                        options: {
+                            responsive: true,
+                            maintainAspectRatio: false,
+                            scales: {
+                                y: {
+                                    beginAtZero: true,
+                                    title: {
+                                        display: true,
+                                        text: '消息数量'
+                                    }
+                                },
+                                x: {
+                                    title: {
+                                        display: true,
+                                        text: '日期'
+                                    }
+                                }
+                            },
+                            plugins: {
+                                title: {
+                                    display: true,
+                                    text: '群组消息数量趋势',
+                                    font: {
+                                        size: 16
+                                    }
+                                },
+                                tooltip: {
+                                    callbacks: {
+                                        label: function(context) {
+                                            return `消息数量: ${context.raw}`;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    });
+                    
+                    // 添加表格显示详细数据
                     let tableHtml = `
-                        <table class="el-table" style="width: 100%;">
-                            <thead>
-                                <tr>
-                                    <th style="padding: 12px 0; text-align: center; background-color: #f5f7fa; color: #606266; font-weight: bold; border-bottom: 1px solid #ebeef5;">日期</th>
-                                    <th style="padding: 12px 0; text-align: center; background-color: #f5f7fa; color: #606266; font-weight: bold; border-bottom: 1px solid #ebeef5;">消息数量</th>
-                                </tr>
-                            </thead>
-                            <tbody>
+                        <div style="margin-top: 20px;">
+                            <h4 style="margin: 10px 0;">详细数据</h4>
+                            <table class="el-table" style="width: 100%;">
+                                <thead>
+                                    <tr>
+                                        <th style="padding: 12px 0; text-align: center; background-color: #f5f7fa; color: #606266; font-weight: bold; border-bottom: 1px solid #ebeef5;">日期</th>
+                                        <th style="padding: 12px 0; text-align: center; background-color: #f5f7fa; color: #606266; font-weight: bold; border-bottom: 1px solid #ebeef5;">消息数量</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
                     `;
                     
                     for (let i = 0; i < labels.length; i++) {
@@ -498,39 +556,15 @@
                     }
                     
                     tableHtml += `
-                            </tbody>
-                        </table>
-                    `;
-                    
-                    container.innerHTML = tableHtml;
-                    
-                    // 添加简单的可视化条形图
-                    const maxValue = Math.max(...messageData);
-                    let chartHtml = `
-                        <div style="margin-top: 20px;">
-                            <h4 style="margin: 10px 0;">消息数量可视化</h4>
-                            <div style="display: flex; flex-direction: column; gap: 5px;">
-                    `;
-                    
-                    for (let i = 0; i < labels.length; i++) {
-                        const percentage = (messageData[i] / maxValue) * 100;
-                        chartHtml += `
-                            <div style="display: flex; align-items: center; margin-bottom: 5px;">
-                                <span style="width: 80px; text-align: right; margin-right: 10px;">${labels[i]}</span>
-                                <div style="flex-grow: 1; display: flex; align-items: center;">
-                                    <div style="background-color: rgba(75, 192, 192, 0.7); height: 20px; width: ${percentage}%; min-width: 2px; border-radius: 2px;"></div>
-                                    <span style="margin-left: 10px;">${messageData[i]}</span>
-                                </div>
-                            </div>
-                        `;
-                    }
-                    
-                    chartHtml += `
-                            </div>
+                                </tbody>
+                            </table>
                         </div>
                     `;
                     
-                    container.innerHTML += chartHtml;
+                    // 在图表下方添加表格
+                    const tableContainer = document.createElement('div');
+                    tableContainer.innerHTML = tableHtml;
+                    container.parentNode.insertBefore(tableContainer, container.nextSibling);
                     
                 } catch (error) {
                     console.error('渲染趋势数据出错:', error);