调整趋势图功能，加入了查询数据库，分析群聊聊天数量的功能
This commit is contained in:
liuwei
@@ -464,9 +464,6 @@
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 清空容器
|
|
||||||
container.innerHTML = '';
|
|
||||||
|
|
||||||
// 准备数据
|
// 准备数据
|
||||||
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);
|
||||||
@@ -476,16 +473,77 @@
|
|||||||
return;
|
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 = `
|
let tableHtml = `
|
||||||
<table class="el-table" style="width: 100%;">
|
<div style="margin-top: 20px;">
|
||||||
<thead>
|
<h4 style="margin: 10px 0;">详细数据</h4>
|
||||||
<tr>
|
<table class="el-table" style="width: 100%;">
|
||||||
<th style="padding: 12px 0; text-align: center; background-color: #f5f7fa; color: #606266; font-weight: bold; border-bottom: 1px solid #ebeef5;">日期</th>
|
<thead>
|
||||||
<th style="padding: 12px 0; text-align: center; background-color: #f5f7fa; color: #606266; font-weight: bold; border-bottom: 1px solid #ebeef5;">消息数量</th>
|
<tr>
|
||||||
</tr>
|
<th style="padding: 12px 0; text-align: center; background-color: #f5f7fa; color: #606266; font-weight: bold; border-bottom: 1px solid #ebeef5;">日期</th>
|
||||||
</thead>
|
<th style="padding: 12px 0; text-align: center; background-color: #f5f7fa; color: #606266; font-weight: bold; border-bottom: 1px solid #ebeef5;">消息数量</th>
|
||||||
<tbody>
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
for (let i = 0; i < labels.length; i++) {
|
for (let i = 0; i < labels.length; i++) {
|
||||||
@@ -498,39 +556,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
tableHtml += `
|
tableHtml += `
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</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>
|
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
container.innerHTML += chartHtml;
|
// 在图表下方添加表格
|
||||||
|
const tableContainer = document.createElement('div');
|
||||||
|
tableContainer.innerHTML = tableHtml;
|
||||||
|
container.parentNode.insertBefore(tableContainer, container.nextSibling);
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('渲染趋势数据出错:', error);
|
console.error('渲染趋势数据出错:', error);
|
||||||
|
|||||||
Reference in New Issue
Block a user