feat(workbench): 趋势图仅展示最新发布倒推半年数据(时间窗口过滤)
This commit is contained in:
1 parent
32fca120da
commit
eb082ec5a4
1 file changed
+14
-9
@@ -547,9 +547,9 @@ async function renderAccountDetail(view, id) {
|
|||||||
view._reload = load; // 静默自动刷新(保留当前 tab/翻页)
|
view._reload = load; // 静默自动刷新(保留当前 tab/翻页)
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 点赞/评论趋势折线图:X=视频发布时间(升序),单图双 Y 轴(左点赞/右评论),彩色序列
|
/* 点赞/评论趋势折线图:X=视频发布时间(倒序 新→旧),单图双 Y 轴(左点赞/右评论),彩色序列
|
||||||
点赞量级远超评论(60 倍+),双 Y 轴独立刻度保证两条线都清晰可见;lieflat-charts G8 Rainfall 骨架
|
只展示最新发布视频倒推半年的数据;点赞量级远超评论(60 倍+),双 Y 轴独立刻度保证两条线都清晰可见
|
||||||
mono token:纸 #F0EFEB / 墨 #1C1C1A / 灰 #8F8E88 / 网格 #DEDDD6;tipLight 黑底纸字;quarticOut 入场 */
|
lieflat-charts G8 Rainfall 骨架;mono token:纸 #F0EFEB / 墨 #1C1C1A / 灰 #8F8E88 / 网格 #DEDDD6;tipLight 黑底纸字 */
|
||||||
function renderTrendChart(view) {
|
function renderTrendChart(view) {
|
||||||
const el = view.querySelector('#trendChart');
|
const el = view.querySelector('#trendChart');
|
||||||
if (!el) return;
|
if (!el) return;
|
||||||
@@ -560,7 +560,12 @@ async function renderAccountDetail(view, id) {
|
|||||||
.map((v) => ({ t: String(v.publish_time).replace(/-/g, '/'), like: numOf(v.like_display || v.like_count), cmt: numOf(v.comment_count) }))
|
.map((v) => ({ t: String(v.publish_time).replace(/-/g, '/'), like: numOf(v.like_display || v.like_count), cmt: numOf(v.comment_count) }))
|
||||||
.filter((p) => p.like > 0 || p.cmt > 0)
|
.filter((p) => p.like > 0 || p.cmt > 0)
|
||||||
.sort((a, b) => new Date(b.t) - new Date(a.t)); // 时间轴从左到右 新→旧(阅读习惯先看新发布)
|
.sort((a, b) => new Date(b.t) - new Date(a.t)); // 时间轴从左到右 新→旧(阅读习惯先看新发布)
|
||||||
if (pts.length < 2) { el.innerHTML = `<div class="trend-empty">暂无足够视频数据展示趋势</div>`; return; }
|
// 半年时间窗口:以最新发布视频为锚点,倒推 6 个月,只展示窗口内的数据
|
||||||
|
const latest = new Date(pts[0].t);
|
||||||
|
const halfYearAgo = new Date(latest);
|
||||||
|
halfYearAgo.setMonth(halfYearAgo.getMonth() - 6);
|
||||||
|
const ptsWin = pts.filter((p) => new Date(p.t) >= halfYearAgo);
|
||||||
|
if (ptsWin.length < 2) { el.innerHTML = `<div class="trend-empty">近半年暂无足够视频数据展示趋势</div>`; return; }
|
||||||
const PAPER = '#F0EFEB', MUTED = '#8F8E88', GRID = '#DEDDD6';
|
const PAPER = '#F0EFEB', MUTED = '#8F8E88', GRID = '#DEDDD6';
|
||||||
const LIKE = '#E54D42', CMT = '#3B82F6'; // 点赞=红 / 评论=蓝(彩色双序列)
|
const LIKE = '#E54D42', CMT = '#3B82F6'; // 点赞=红 / 评论=蓝(彩色双序列)
|
||||||
const tipLight = { backgroundColor: '#1C1C1A', borderWidth: 0, padding: [10, 14], textStyle: { color: PAPER, fontFamily: 'Inter, system-ui, sans-serif', fontSize: 12 } };
|
const tipLight = { backgroundColor: '#1C1C1A', borderWidth: 0, padding: [10, 14], textStyle: { color: PAPER, fontFamily: 'Inter, system-ui, sans-serif', fontSize: 12 } };
|
||||||
@@ -577,13 +582,13 @@ async function renderAccountDetail(view, id) {
|
|||||||
tooltip: { ...tipLight, trigger: 'axis', axisPointer: { type: 'cross', lineStyle: { color: '#B0AFA9' } },
|
tooltip: { ...tipLight, trigger: 'axis', axisPointer: { type: 'cross', lineStyle: { color: '#B0AFA9' } },
|
||||||
formatter: (ps) => {
|
formatter: (ps) => {
|
||||||
if (!ps || !ps.length) return '';
|
if (!ps || !ps.length) return '';
|
||||||
const d = pts[ps[0].dataIndex];
|
const d = ptsWin[ps[0].dataIndex];
|
||||||
const lines = ps.map((p) => `${p.marker}${p.seriesName} ${fmtWan(p.value)}`).join('<br/>');
|
const lines = ps.map((p) => `${p.marker}${p.seriesName} ${fmtWan(p.value)}`).join('<br/>');
|
||||||
return `${d.t.split(' ')[0]}<br/>${lines}`;
|
return `${d.t.split(' ')[0]}<br/>${lines}`;
|
||||||
} },
|
} },
|
||||||
grid: { left: 56, right: 56, top: 16, bottom: 28 },
|
grid: { left: 56, right: 56, top: 16, bottom: 28 },
|
||||||
xAxis: { type: 'category', data: pts.map((p) => p.t), axisLine: { show: false }, axisTick: { show: false },
|
xAxis: { type: 'category', data: ptsWin.map((p) => p.t), axisLine: { show: false }, axisTick: { show: false },
|
||||||
axisLabel: { color: MUTED, fontFamily: 'Inter, system-ui, sans-serif', fontSize: 9.5, interval: Math.max(0, Math.ceil(pts.length / 8) - 1), formatter: (v) => v.slice(5, 10) } },
|
axisLabel: { color: MUTED, fontFamily: 'Inter, system-ui, sans-serif', fontSize: 9.5, interval: Math.max(0, Math.ceil(ptsWin.length / 8) - 1), formatter: (v) => v.slice(5, 10) } },
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{ type: 'value', name: '点赞', nameTextStyle: { color: LIKE, fontFamily: 'Inter, system-ui, sans-serif', fontSize: 10, padding: [0, 0, 0, -40] },
|
{ type: 'value', name: '点赞', nameTextStyle: { color: LIKE, fontFamily: 'Inter, system-ui, sans-serif', fontSize: 10, padding: [0, 0, 0, -40] },
|
||||||
splitLine: { lineStyle: { color: GRID } }, axisLabel: { color: LIKE, fontFamily: 'Inter, system-ui, sans-serif', fontSize: 9.5, formatter: wanTick }, axisLine: { show: false }, axisTick: { show: false } },
|
splitLine: { lineStyle: { color: GRID } }, axisLabel: { color: LIKE, fontFamily: 'Inter, system-ui, sans-serif', fontSize: 9.5, formatter: wanTick }, axisLine: { show: false }, axisTick: { show: false } },
|
||||||
@@ -591,9 +596,9 @@ async function renderAccountDetail(view, id) {
|
|||||||
splitLine: { show: false }, axisLabel: { color: CMT, fontFamily: 'Inter, system-ui, sans-serif', fontSize: 9.5, formatter: wanTick }, axisLine: { show: false }, axisTick: { show: false } },
|
splitLine: { show: false }, axisLabel: { color: CMT, fontFamily: 'Inter, system-ui, sans-serif', fontSize: 9.5, formatter: wanTick }, axisLine: { show: false }, axisTick: { show: false } },
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{ name: '点赞', type: 'line', yAxisIndex: 0, data: pts.map((p) => p.like), smooth: 0.4, symbol: 'none', lineStyle: { color: LIKE, width: 2.2 }, z: 3,
|
{ name: '点赞', type: 'line', yAxisIndex: 0, data: ptsWin.map((p) => p.like), smooth: 0.4, symbol: 'none', lineStyle: { color: LIKE, width: 2.2 }, z: 3,
|
||||||
areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(229,77,66,.20)' }, { offset: 1, color: 'rgba(229,77,66,0)' }] } } },
|
areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(229,77,66,.20)' }, { offset: 1, color: 'rgba(229,77,66,0)' }] } } },
|
||||||
{ name: '评论', type: 'line', yAxisIndex: 1, data: pts.map((p) => p.cmt), smooth: 0.4, symbol: 'none', lineStyle: { color: CMT, width: 2 }, z: 2,
|
{ name: '评论', type: 'line', yAxisIndex: 1, data: ptsWin.map((p) => p.cmt), smooth: 0.4, symbol: 'none', lineStyle: { color: CMT, width: 2 }, z: 2,
|
||||||
areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(59,130,246,.14)' }, { offset: 1, color: 'rgba(59,130,246,0)' }] } } },
|
areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(59,130,246,.14)' }, { offset: 1, color: 'rgba(59,130,246,0)' }] } } },
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in new issue
Block a user