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

This commit is contained in:
liuwei
2025-03-26 14:03:53 +08:00
parent 3681b1d173
commit c3288e8362

View File

@@ -151,7 +151,8 @@
<div v-else> <div v-else>
<div class="chart-container"> <div class="chart-container">
<h3>消息数量趋势</h3> <h3>消息数量趋势</h3>
<canvas ref="messageTrendChart" width="800" height="300"></canvas> <!-- 使用div作为容器动态创建canvas -->
<div ref="chartContainer" style="width: 100%; height: 300px;"></div>
</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,16 +453,26 @@
renderTrendChart(data) { renderTrendChart(data) {
try { try {
// 使用Vue的ref获取Canvas元素 console.log('开始渲染图表');
const canvas = this.$refs.messageTrendChart;
if (!canvas) { // 获取容器元素
console.error('找不到Canvas元素ref: messageTrendChart'); const container = this.$refs.chartContainer;
this.$message.error('无法找到图表元素,请尝试重新打开对话框'); if (!container) {
this.trendLoading = false; console.error('找不到图表容器');
this.$message.error('无法找到图表容器,请尝试重新打开对话框');
return; return;
} }
// 清空容器
container.innerHTML = '';
// 动态创建Canvas元素
const canvas = document.createElement('canvas');
canvas.width = container.clientWidth;
canvas.height = container.clientHeight;
container.appendChild(canvas);
console.log('已创建Canvas元素');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
// 销毁旧图表 // 销毁旧图表