|
@@ -136,8 +136,8 @@ for cat in valid_categories:
|
|
|
cells.append("<td>-</td>")
|
|
cells.append("<td>-</td>")
|
|
|
uv_rows.append("<tr>" + "".join(cells) + "</tr>")
|
|
uv_rows.append("<tr>" + "".join(cells) + "</tr>")
|
|
|
|
|
|
|
|
-# 4. 进入推荐率热力图
|
|
|
|
|
-pivot_recommend = df.groupby(['channel', 'merge一级品类']).apply(
|
|
|
|
|
|
|
+# 4. 进入推荐率热力图（按品类×渠道）
|
|
|
|
|
+pivot_recommend = df.groupby(['merge一级品类', 'channel']).apply(
|
|
|
lambda x: (x['进入推荐率'] * x['点击uv']).sum() / x['点击uv'].sum() if x['点击uv'].sum() > 0 else 0,
|
|
lambda x: (x['进入推荐率'] * x['点击uv']).sum() / x['点击uv'].sum() if x['点击uv'].sum() > 0 else 0,
|
|
|
include_groups=False
|
|
include_groups=False
|
|
|
).unstack()
|
|
).unstack()
|
|
@@ -165,9 +165,11 @@ def get_recommend_color(val):
|
|
|
|
|
|
|
|
recommend_rows = []
|
|
recommend_rows = []
|
|
|
for cat in valid_categories:
|
|
for cat in valid_categories:
|
|
|
|
|
+ if cat not in pivot_recommend.index:
|
|
|
|
|
+ continue
|
|
|
cells = [f"<td>{str(cat)[:12]}</td>"]
|
|
cells = [f"<td>{str(cat)[:12]}</td>"]
|
|
|
for ch in heatmap_cols:
|
|
for ch in heatmap_cols:
|
|
|
- if ch in pivot_recommend.columns and cat in pivot_recommend.index and pd.notna(pivot_recommend.loc[cat, ch]):
|
|
|
|
|
|
|
+ if ch in pivot_recommend.columns and pd.notna(pivot_recommend.loc[cat, ch]):
|
|
|
val = pivot_recommend.loc[cat, ch]
|
|
val = pivot_recommend.loc[cat, ch]
|
|
|
style = get_recommend_color(val)
|
|
style = get_recommend_color(val)
|
|
|
cells.append(f'<td style="{style}">{val:.4f}</td>')
|
|
cells.append(f'<td style="{style}">{val:.4f}</td>')
|
|
@@ -286,7 +288,8 @@ html_content = f"""<!DOCTYPE html>
|
|
|
margin: 20px; background: #f5f5f5; }}
|
|
margin: 20px; background: #f5f5f5; }}
|
|
|
.container {{ max-width: 1400px; margin: 0 auto; }}
|
|
.container {{ max-width: 1400px; margin: 0 auto; }}
|
|
|
h1 {{ color: #333; border-bottom: 2px solid #007bff; padding-bottom: 10px; }}
|
|
h1 {{ color: #333; border-bottom: 2px solid #007bff; padding-bottom: 10px; }}
|
|
|
- h2 {{ color: #555; margin-top: 30px; }}
|
|
|
|
|
|
|
+ h2 {{ color: #444; margin-top: 30px; padding-top: 20px; border-top: 1px solid #ddd; }}
|
|
|
|
|
+ h3 {{ color: #555; margin-top: 20px; }}
|
|
|
.chart-container {{ background: white; padding: 20px; margin: 20px 0;
|
|
.chart-container {{ background: white; padding: 20px; margin: 20px 0;
|
|
|
border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }}
|
|
border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }}
|
|
|
.summary {{ background: white; padding: 20px; margin: 20px 0;
|
|
.summary {{ background: white; padding: 20px; margin: 20px 0;
|
|
@@ -294,7 +297,7 @@ html_content = f"""<!DOCTYPE html>
|
|
|
.stat-card {{ flex: 1; min-width: 150px; padding: 15px;
|
|
.stat-card {{ flex: 1; min-width: 150px; padding: 15px;
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
border-radius: 8px; color: white; text-align: center; }}
|
|
border-radius: 8px; color: white; text-align: center; }}
|
|
|
- .stat-card h3 {{ margin: 0; font-size: 24px; }}
|
|
|
|
|
|
|
+ .stat-card h4 {{ margin: 0; font-size: 24px; }}
|
|
|
.stat-card p {{ margin: 5px 0 0; opacity: 0.9; }}
|
|
.stat-card p {{ margin: 5px 0 0; opacity: 0.9; }}
|
|
|
table {{ width: 100%; border-collapse: collapse; margin: 10px 0; }}
|
|
table {{ width: 100%; border-collapse: collapse; margin: 10px 0; }}
|
|
|
th, td {{ padding: 8px 12px; text-align: left; border-bottom: 1px solid #ddd; }}
|
|
th, td {{ padding: 8px 12px; text-align: left; border-bottom: 1px solid #ddd; }}
|
|
@@ -303,13 +306,16 @@ html_content = f"""<!DOCTYPE html>
|
|
|
.heatmap {{ overflow-x: auto; }}
|
|
.heatmap {{ overflow-x: auto; }}
|
|
|
.heatmap table {{ font-size: 12px; }}
|
|
.heatmap table {{ font-size: 12px; }}
|
|
|
.heatmap td {{ text-align: center; min-width: 80px; }}
|
|
.heatmap td {{ text-align: center; min-width: 80px; }}
|
|
|
- .high {{ background: #28a745; color: white; }}
|
|
|
|
|
- .medium {{ background: #ffc107; }}
|
|
|
|
|
- .low {{ background: #dc3545; color: white; }}
|
|
|
|
|
canvas {{ max-height: 400px; }}
|
|
canvas {{ max-height: 400px; }}
|
|
|
.matrix-section {{ margin-bottom: 40px; }}
|
|
.matrix-section {{ margin-bottom: 40px; }}
|
|
|
- .legend {{ font-size: 12px; margin: 10px 0; }}
|
|
|
|
|
- .legend span {{ padding: 2px 8px; margin-right: 10px; border-radius: 3px; }}
|
|
|
|
|
|
|
+ .legend {{ font-size: 12px; margin: 10px 0; color: #666; }}
|
|
|
|
|
+ .toc {{ background: white; padding: 20px; margin: 20px 0; border-radius: 8px; }}
|
|
|
|
|
+ .toc h2 {{ margin-top: 0; border: none; padding: 0; }}
|
|
|
|
|
+ .toc ul {{ margin: 0; padding-left: 20px; }}
|
|
|
|
|
+ .toc li {{ margin: 5px 0; }}
|
|
|
|
|
+ .toc a {{ color: #007bff; text-decoration: none; }}
|
|
|
|
|
+ .toc a:hover {{ text-decoration: underline; }}
|
|
|
|
|
+ .toc .sub {{ padding-left: 20px; }}
|
|
|
</style>
|
|
</style>
|
|
|
</head>
|
|
</head>
|
|
|
<body>
|
|
<body>
|
|
@@ -319,24 +325,51 @@ html_content = f"""<!DOCTYPE html>
|
|
|
|
|
|
|
|
<div class="summary">
|
|
<div class="summary">
|
|
|
<div class="stat-card">
|
|
<div class="stat-card">
|
|
|
- <h3>{total_uv:,}</h3>
|
|
|
|
|
|
|
+ <h4>{total_uv:,}</h4>
|
|
|
<p>总点击UV</p>
|
|
<p>总点击UV</p>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="stat-card">
|
|
<div class="stat-card">
|
|
|
- <h3>{avg_ror:.4f}</h3>
|
|
|
|
|
|
|
+ <h4>{avg_ror:.4f}</h4>
|
|
|
<p>平均回流率</p>
|
|
<p>平均回流率</p>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="stat-card">
|
|
<div class="stat-card">
|
|
|
- <h3>{channel_count}</h3>
|
|
|
|
|
|
|
+ <h4>{channel_count}</h4>
|
|
|
<p>渠道数</p>
|
|
<p>渠道数</p>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="stat-card">
|
|
<div class="stat-card">
|
|
|
- <h3>{category_count}</h3>
|
|
|
|
|
|
|
+ <h4>{category_count}</h4>
|
|
|
<p>品类数</p>
|
|
<p>品类数</p>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <h2>1. 渠道整体表现</h2>
|
|
|
|
|
|
|
+ <div class="toc">
|
|
|
|
|
+ <h2>目录</h2>
|
|
|
|
|
+ <ul>
|
|
|
|
|
+ <li><a href="#sec1">一、渠道整体表现</a></li>
|
|
|
|
|
+ <li><a href="#sec2">二、一级品类分析</a>
|
|
|
|
|
+ <ul class="sub">
|
|
|
|
|
+ <li><a href="#sec2-1">2.1 回流率矩阵</a></li>
|
|
|
|
|
+ <li><a href="#sec2-2">2.2 点击UV矩阵</a></li>
|
|
|
|
|
+ <li><a href="#sec2-3">2.3 进入推荐率矩阵</a></li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li><a href="#sec3">三、二级品类分析</a>
|
|
|
|
|
+ <ul class="sub">
|
|
|
|
|
+ <li><a href="#sec3-1">3.1 回流率矩阵</a></li>
|
|
|
|
|
+ <li><a href="#sec3-2">3.2 点击UV矩阵</a></li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li><a href="#sec4">四、趋势与分布</a>
|
|
|
|
|
+ <ul class="sub">
|
|
|
|
|
+ <li><a href="#sec4-1">4.1 渠道占比 vs 回流率</a></li>
|
|
|
|
|
+ <li><a href="#sec4-2">4.2 每日回流率趋势</a></li>
|
|
|
|
|
+ <li><a href="#sec4-3">4.3 UV vs 回流率散点</a></li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <h2 id="sec1">一、渠道整体表现</h2>
|
|
|
<div class="chart-container">
|
|
<div class="chart-container">
|
|
|
<table>
|
|
<table>
|
|
|
<tr><th>渠道</th><th>点击UV</th><th>回流率</th><th>可视化</th></tr>
|
|
<tr><th>渠道</th><th>点击UV</th><th>回流率</th><th>可视化</th></tr>
|
|
@@ -344,7 +377,9 @@ html_content = f"""<!DOCTYPE html>
|
|
|
</table>
|
|
</table>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <h2>2. 渠道×品类 回流率矩阵</h2>
|
|
|
|
|
|
|
+ <h2 id="sec2">二、一级品类分析</h2>
|
|
|
|
|
+
|
|
|
|
|
+ <h3 id="sec2-1">2.1 回流率矩阵</h3>
|
|
|
<div class="chart-container heatmap matrix-section">
|
|
<div class="chart-container heatmap matrix-section">
|
|
|
<div class="legend">颜色越深=回流率越高（白→绿渐变，max=0.50）</div>
|
|
<div class="legend">颜色越深=回流率越高（白→绿渐变，max=0.50）</div>
|
|
|
<table>
|
|
<table>
|
|
@@ -353,7 +388,7 @@ html_content = f"""<!DOCTYPE html>
|
|
|
</table>
|
|
</table>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <h2>3. 渠道×品类 点击UV矩阵</h2>
|
|
|
|
|
|
|
+ <h3 id="sec2-2">2.2 点击UV矩阵</h3>
|
|
|
<div class="chart-container heatmap matrix-section">
|
|
<div class="chart-container heatmap matrix-section">
|
|
|
<div class="legend">颜色越深=UV越高（白→蓝渐变，max=10万）</div>
|
|
<div class="legend">颜色越深=UV越高（白→蓝渐变，max=10万）</div>
|
|
|
<table>
|
|
<table>
|
|
@@ -362,7 +397,7 @@ html_content = f"""<!DOCTYPE html>
|
|
|
</table>
|
|
</table>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <h2>4. 渠道×品类 进入推荐率矩阵</h2>
|
|
|
|
|
|
|
+ <h3 id="sec2-3">2.3 进入推荐率矩阵</h3>
|
|
|
<div class="chart-container heatmap matrix-section">
|
|
<div class="chart-container heatmap matrix-section">
|
|
|
<div class="legend">颜色：红(<0.70) → 黄(0.70-0.80) → 绿(>0.80)</div>
|
|
<div class="legend">颜色：红(<0.70) → 黄(0.70-0.80) → 绿(>0.80)</div>
|
|
|
<table>
|
|
<table>
|
|
@@ -371,7 +406,9 @@ html_content = f"""<!DOCTYPE html>
|
|
|
</table>
|
|
</table>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <h2>5. 渠道×二级品类 回流率矩阵</h2>
|
|
|
|
|
|
|
+ <h2 id="sec3">三、二级品类分析</h2>
|
|
|
|
|
+
|
|
|
|
|
+ <h3 id="sec3-1">3.1 回流率矩阵</h3>
|
|
|
<div class="chart-container heatmap matrix-section">
|
|
<div class="chart-container heatmap matrix-section">
|
|
|
<div class="legend">颜色越深=回流率越高（白→绿渐变，max=0.50）</div>
|
|
<div class="legend">颜色越深=回流率越高（白→绿渐变，max=0.50）</div>
|
|
|
<table>
|
|
<table>
|
|
@@ -380,7 +417,7 @@ html_content = f"""<!DOCTYPE html>
|
|
|
</table>
|
|
</table>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <h2>6. 渠道×二级品类 点击UV矩阵</h2>
|
|
|
|
|
|
|
+ <h3 id="sec3-2">3.2 点击UV矩阵</h3>
|
|
|
<div class="chart-container heatmap matrix-section">
|
|
<div class="chart-container heatmap matrix-section">
|
|
|
<div class="legend">颜色越深=UV越高（白→蓝渐变，max=10万）</div>
|
|
<div class="legend">颜色越深=UV越高（白→蓝渐变，max=10万）</div>
|
|
|
<table>
|
|
<table>
|
|
@@ -389,18 +426,20 @@ html_content = f"""<!DOCTYPE html>
|
|
|
</table>
|
|
</table>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <h2>7. 渠道占比 vs 回流率（气泡图）</h2>
|
|
|
|
|
|
|
+ <h2 id="sec4">四、趋势与分布</h2>
|
|
|
|
|
+
|
|
|
|
|
+ <h3 id="sec4-1">4.1 渠道占比 vs 回流率（气泡图）</h3>
|
|
|
<div class="chart-container">
|
|
<div class="chart-container">
|
|
|
<canvas id="bubbleChart"></canvas>
|
|
<canvas id="bubbleChart"></canvas>
|
|
|
<p style="font-size:12px;color:#666;margin-top:10px;">X轴=UV占比，Y轴=回流率，气泡大小=UV量级</p>
|
|
<p style="font-size:12px;color:#666;margin-top:10px;">X轴=UV占比，Y轴=回流率，气泡大小=UV量级</p>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <h2>8. 每日回流率趋势</h2>
|
|
|
|
|
|
|
+ <h3 id="sec4-2">4.2 每日回流率趋势</h3>
|
|
|
<div class="chart-container">
|
|
<div class="chart-container">
|
|
|
<canvas id="trendChart"></canvas>
|
|
<canvas id="trendChart"></canvas>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <h2>9. UV vs 回流率 散点分布</h2>
|
|
|
|
|
|
|
+ <h3 id="sec4-3">4.3 UV vs 回流率 散点分布</h3>
|
|
|
<div class="chart-container">
|
|
<div class="chart-container">
|
|
|
<canvas id="scatterChart"></canvas>
|
|
<canvas id="scatterChart"></canvas>
|
|
|
</div>
|
|
</div>
|
