求教,用 AI 把原帖代码修改了一半最后怎么修改都修改不对,求大佬帮忙修改下。
想实现的效果是:① 把原一年两张的热力图合并为一张,② 根据日记文档字数体现活跃度
这个是我用豆包修改了一半的代码
//!js
const query = async () => {
// 初始化QueryView数据视图
let dv = Query.DataView(protyle, item, top);
// 存储处理后的笔记数据
const data = [];
let thisYear;
// 获取文档字数的函数
const getDocWordCount = async (blockId) => {
try {
// 使用思源API获取文档内容
const resp = await fetch(`/api/block/getBlockInfo`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: blockId })
});
if (!resp.ok) {
throw new Error(`获取文档内容失败: ${resp.status}`);
}
const blockInfo = await resp.json();
// 计算纯文本字数(去除HTML标签)
const textContent = blockInfo.content.replace(/<[^>]+>/g, '');
return textContent.length;
} catch (error) {
console.error('获取文档字数出错:', error);
return 0;
}
};
try {
// 获取根文档的子文档
let childs = await Query.childdoc(dv.root_id);
// 遍历子文档获取日期笔记
for (let child of childs) {
const subchilds = await Query.childdoc(child.root_id);
for (let subchild of subchilds) {
// 从文档属性中提取日期信息
const m = subchild.ial.match(/dailynote-(\d{4})(\d{2})(\d{2})/);
// 跳过格式不匹配的文档
if (!m) continue;
const [_, year, month, day] = m;
// 确定当前年份
if (!thisYear) {
thisYear = year;
}
// 添加到数据列表
data.push({
id: subchild.id,
date: `${year}-${month}-${day}`,
title: subchild.content,
url: `siyuan://blocks/${subchild.id}`
});
}
}
// 确保有数据可展示
if (data.length === 0) {
dv.content = '<div class="bq">未找到符合条件的日期笔记</div>';
dv.render();
return;
}
// 生成热力图数据(改为根据文档字数)
const heatmapData = [];
let maxWordCount = 0;
// 先获取所有文档的字数并找出最大值
for (const item of data) {
const wordCount = await getDocWordCount(item.id);
item.wordCount = wordCount;
maxWordCount = Math.max(maxWordCount, wordCount);
}
// 生成热力图数据,根据字数计算热度值
for (const item of data) {
// 根据字数计算热度值,乘以系数使数值更合适
const coefficient = 1000 / Math.max(1, maxWordCount); // 避免除以0
const value = Math.min(item.wordCount * coefficient, 1000); // 限制最大值为1000
heatmapData.push([item.date, value]);
}
// 计算实际数据的最大值
const actualMax = Math.max(...heatmapData.map(item => item[1]));
// ECharts配置
const option = {
tooltip: {
trigger: 'item',
formatter: (params) => {
const item = data[params.dataIndex];
return `
<div class="font-bold">${item.date}</div>
<div>${item.title}</div>
<div class="text-sm text-gray-500">字数: ${item.wordCount}</div>
<div class="text-sm text-gray-500">活跃度: ${params.value[1]}</div>
`;
}
},
visualMap: {
min: 0,
max: Math.max(1000, actualMax), // 确保最大值合理
show: false,
type: 'piecewise',
orient: 'horizontal',
left: 'center',
top: 'bottom',
pieces: [
{ min: 0, max: 200, color: '#f1eef6' },
{ min: 201, max: 400, color: '#bdc9e1' },
{ min: 401, max: 600, color: '#74a9cf' },
{ min: 601, max: 800, color: '#2b8cbe' },
{ min: 801, max: 1000, color: '#045a8d' }
]
},
calendar: [
{
range: [`${thisYear}-01-01`, `${thisYear}-06-30`],
cellSize: [22, 22],
top: 50,
left: 'center',
orient: 'horizontal',
dayLabel: { nameMap: 'cn' },
monthLabel: { nameMap: 'cn' },
itemStyle: {
borderRadius: 4
}
},
{
range: [`${thisYear}-07-01`, `${thisYear}-12-31`],
cellSize: [22, 22],
top: 320,
left: 'center',
orient: 'horizontal',
dayLabel: { nameMap: 'cn' },
monthLabel: { nameMap: 'cn' },
itemStyle: {
borderRadius: 4
}
}
],
series: [
{
type: 'heatmap',
coordinateSystem: 'calendar',
data: heatmapData,
label: {
show: false
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
{
type: 'heatmap',
coordinateSystem: 'calendar',
calendarIndex: 1,
data: heatmapData,
label: {
show: false
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 添加ECharts图表
dv.addecharts(option, {
height: '600px',
events: {
click: (params) => {
const item = data[params.dataIndex];
// 点击时打开对应笔记
Query.Utils.openBlock(item.id);
}
}
});
// 添加标题
dv.title = `<div class="text-center text-xl font-bold">${thisYear}年笔记日历</div>`;
// 更新图例说明
dv.content += `
<div class="flex justify-center mt-4 gap-4">
<div class="flex items-center"><span class="inline-block w-4 h-4 bg-[#f1eef6] mr-2 border border-gray-300"></span> 低活跃度</div>
<div class="flex items-center"><span class="inline-block w-4 h-4 bg-[#74a9cf] mr-2 border border-gray-300"></span> 中等活跃度</div>
<div class="flex items-center"><span class="inline-block w-4 h-4 bg-[#045a8d] mr-2 border border-gray-300"></span> 高活跃度</div>
</div>
`;
// 渲染视图
dv.render();
} catch (error) {
console.error('查询执行出错:', error);
dv.content = `<div class="bq text-red-500">查询执行出错: ${error.message}</div>`;
dv.render();
}
}
return query();