admin/mcn-short-video
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(workbench): 趋势图改单图双Y轴彩色版（点赞红/评论蓝，Y轴万单位）

Browse Source
This commit is contained in:
maogeigei committed 2026-09-02 11:31:49 +08:00
1 parent d9cbfd88b4
commit a0934c1a90
1 file changed
+28 -23
Download Patch File Download Diff File Expand all files Collapse all files
project/短视频脚本创作/V1.0/mcn-work-shop/public/data-pages.js
+28 -23
View File
@@ -547,7 +547,8 @@ async function renderAccountDetail(view, id) {
view._reload = load; // 静默自动刷新（保留当前 tab/翻页）
}
/* 点赞/评论趋势折线图：X=视频发布时间（升序），点赞/评论双序列面积折线（lieflat-charts G8 Rainfall 骨架）
/* 点赞/评论趋势折线图：X=视频发布时间（升序），单图双 Y 轴（左点赞/右评论），彩色序列
点赞量级远超评论（60 倍+），双 Y 轴独立刻度保证两条线都清晰可见；lieflat-charts G8 Rainfall 骨架
mono token：纸 #F0EFEB / 墨 #1C1C1A / 灰 #8F8E88 / 网格 #DEDDD6；tipLight 黑底纸字；quarticOut 入场 */
function renderTrendChart(view) {
const el = view.querySelector('#trendChart');
@@ -558,38 +559,42 @@ async function renderAccountDetail(view, id) {
const pts = items
.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)
.sort((a, b) => new Date(a.t) - new Date(b.t));
.sort((a, b) => new Date(a.t) - new Date(b.t)); // 时间轴升序（左旧右新）
if (pts.length < 2) { el.innerHTML = `<div class="trend-empty">暂无足够视频数据展示趋势</div>`; return; }
const INK = '#1C1C1A', PAPER = '#F0EFEB', MUTED = '#8F8E88', GRID = '#DEDDD6', FAINT = '#C6C5BF';
const tipLight = { backgroundColor: INK, borderWidth: 0, padding: [10, 14], textStyle: { color: PAPER, fontFamily: 'Inter, system-ui, sans-serif', fontSize: 12 } };
const PAPER = '#F0EFEB', MUTED = '#8F8E88', GRID = '#DEDDD6';
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 } };
// Y 轴刻度：≥1万 显示「x万」（整万不带小数，如 400万 / 2.5万），<1万 原值
const wanTick = (v) => {
if (v === 0) return '0';
if (v >= 10000) { const w = v / 10000; return (Number.isInteger(w) ? w : w.toFixed(1)) + '万'; }
return String(v);
};
const chart = echarts.getInstanceByDom(el) || echarts.init(el);
chart.clear();
chart.setOption({
animationDuration: 1200, animationEasing: 'quarticOut',
tooltip: { ...tipLight, trigger: 'axis', axisPointer: { type: 'cross' },
tooltip: { ...tipLight, trigger: 'axis', axisPointer: { type: 'cross', lineStyle: { color: '#B0AFA9' } },
formatter: (ps) => {
const p = ps && ps[0]; if (!p) return '';
const d = pts[p.dataIndex];
return `${d.t.split(' ')[0]}<br/>点赞 ${fmtWan(d.like)} · 评论 ${fmtWan(d.cmt)}`;
if (!ps || !ps.length) return '';
const d = pts[ps[0].dataIndex];
const lines = ps.map((p) => `${p.marker}${p.seriesName} ${fmtWan(p.value)}`).join('<br/>');
return `${d.t.split(' ')[0]}<br/>${lines}`;
} },
axisPointer: { link: [{ xAxisIndex: 'all' }], lineStyle: { color: '#B0AFA9' } },
grid: [
{ left: 52, right: 16, top: 10, height: '26%' },
{ left: 52, right: 16, top: '42%', bottom: 26 },
],
xAxis: [
{ gridIndex: 0, type: 'category', data: pts.map((p) => p.t), axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false } },
{ gridIndex: 1, type: 'category', data: pts.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) } },
],
grid: { left: 56, right: 56, top: 16, bottom: 28 },
xAxis: { type: 'category', data: pts.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) } },
yAxis: [
{ gridIndex: 0, splitLine: { show: false }, axisLabel: { color: FAINT, fontFamily: 'Inter, system-ui, sans-serif', fontSize: 9 }, axisLine: { show: false }, axisTick: { show: false } },
{ gridIndex: 1, splitLine: { lineStyle: { color: GRID } }, axisLabel: { color: MUTED, fontFamily: 'Inter, system-ui, sans-serif', fontSize: 9.5 }, axisLine: { show: false }, axisTick: { show: false } },
{ 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 } },
{ type: 'value', name: '评论', nameTextStyle: { color: CMT, fontFamily: 'Inter, system-ui, sans-serif', fontSize: 10, padding: [0, -40, 0, 0] },
splitLine: { show: false }, axisLabel: { color: CMT, fontFamily: 'Inter, system-ui, sans-serif', fontSize: 9.5, formatter: wanTick }, axisLine: { show: false }, axisTick: { show: false } },
],
series: [
{ name: '评论', type: 'line', xAxisIndex: 0, yAxisIndex: 0, data: pts.map((p) => p.cmt), smooth: 0.4, symbol: 'none', lineStyle: { color: MUTED, width: 1.8 }, z: 2 },
{ name: '点赞', type: 'line', xAxisIndex: 1, yAxisIndex: 1, data: pts.map((p) => p.like), smooth: 0.4, symbol: 'none', lineStyle: { color: INK, width: 2.2 }, z: 3,
areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(28,28,26,.22)' }, { offset: 1, color: 'rgba(28,28,26,0)' }] } } },
{ name: '点赞', type: 'line', yAxisIndex: 0, data: pts.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)' }] } } },
{ name: '评论', type: 'line', yAxisIndex: 1, data: pts.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)' }] } } },
],
});
}