调整趋势图功能,加入了查询数据库,分析群聊聊天数量的功能
This commit is contained in:
@@ -151,7 +151,8 @@
|
||||
<div v-else>
|
||||
<div class="chart-container">
|
||||
<h3>消息数量趋势</h3>
|
||||
<canvas ref="messageTrendChart" width="800" height="300"></canvas>
|
||||
<!-- 使用div作为容器,动态创建canvas -->
|
||||
<div ref="chartContainer" style="width: 100%; height: 300px;"></div>
|
||||
</div>
|
||||
<div style="margin-top: 20px; text-align: center;">
|
||||
<el-radio-group v-model="trendDays" @change="loadMessageTrend">
|
||||
@@ -452,16 +453,26 @@
|
||||
|
||||
renderTrendChart(data) {
|
||||
try {
|
||||
// 使用Vue的ref获取Canvas元素
|
||||
const canvas = this.$refs.messageTrendChart;
|
||||
console.log('开始渲染图表');
|
||||
|
||||
if (!canvas) {
|
||||
console.error('找不到Canvas元素,ref: messageTrendChart');
|
||||
this.$message.error('无法找到图表元素,请尝试重新打开对话框');
|
||||
this.trendLoading = false;
|
||||
// 获取容器元素
|
||||
const container = this.$refs.chartContainer;
|
||||
if (!container) {
|
||||
console.error('找不到图表容器');
|
||||
this.$message.error('无法找到图表容器,请尝试重新打开对话框');
|
||||
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');
|
||||
|
||||
// 销毁旧图表
|
||||
|
||||
Reference in New Issue
Block a user