调整趋势图功能,加入了查询数据库,分析群聊聊天数量的功能

This commit is contained in:
liuwei
2025-03-26 14:01:30 +08:00
parent 759076589b
commit 3681b1d173

View File

@@ -151,7 +151,7 @@
<div v-else> <div v-else>
<div class="chart-container"> <div class="chart-container">
<h3>消息数量趋势</h3> <h3>消息数量趋势</h3>
<canvas id="messageTrendChart" width="800" height="300"></canvas> <canvas ref="messageTrendChart" width="800" height="300"></canvas>
</div> </div>
<div style="margin-top: 20px; text-align: center;"> <div style="margin-top: 20px; text-align: center;">
<el-radio-group v-model="trendDays" @change="loadMessageTrend"> <el-radio-group v-model="trendDays" @change="loadMessageTrend">
@@ -452,11 +452,11 @@
renderTrendChart(data) { renderTrendChart(data) {
try { try {
// 获取Canvas元素 // 使用Vue的ref获取Canvas元素
const canvas = document.getElementById('messageTrendChart'); const canvas = this.$refs.messageTrendChart;
if (!canvas) { if (!canvas) {
console.error('找不到Canvas元素ID: messageTrendChart'); console.error('找不到Canvas元素ref: messageTrendChart');
this.$message.error('无法找到图表元素,请尝试重新打开对话框'); this.$message.error('无法找到图表元素,请尝试重新打开对话框');
this.trendLoading = false; this.trendLoading = false;
return; return;
@@ -475,8 +475,8 @@
} }
// 准备数据 // 准备数据
const labels = data.dates; const labels = data.dates || [];
const messageData = data.counts.map(count => parseInt(count) || 0); const messageData = (data.counts || []).map(count => parseInt(count) || 0);
// 创建新图表 // 创建新图表
this.charts.trendChart = new Chart(ctx, { this.charts.trendChart = new Chart(ctx, {