893 lines
32 KiB
HTML
893 lines
32 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>品牌分销全景分析 - 品牌数据中心</title>
|
|||
|
|
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
|
|||
|
|
<style>
|
|||
|
|
* {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
|
|||
|
|
'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
color: #333;
|
|||
|
|
padding: 20px;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
max-width: 1600px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-header {
|
|||
|
|
background: white;
|
|||
|
|
padding: 16px 24px;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-title {
|
|||
|
|
font-size: 24px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #262626;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-subtitle {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
color: #262626;
|
|||
|
|
font-size: 20px;
|
|||
|
|
margin: 20px 0 16px 0;
|
|||
|
|
padding-left: 12px;
|
|||
|
|
border-left: 4px solid #1890ff;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stats-section {
|
|||
|
|
background: white;
|
|||
|
|
padding: 24px;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stats-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|||
|
|
gap: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-item {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 20px;
|
|||
|
|
border: 1px solid #f0f0f0;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
background: #fafafa;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-item:hover {
|
|||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-item .icon {
|
|||
|
|
font-size: 24px;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-item h3 {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #666;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-item .value {
|
|||
|
|
font-size: 24px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #1890ff;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-item .sub-value {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-card .trend {
|
|||
|
|
display: inline-block;
|
|||
|
|
padding: 2px 8px;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
font-size: 11px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin-left: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.trend.up {
|
|||
|
|
background: #d4edda;
|
|||
|
|
color: #155724;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.trend.down {
|
|||
|
|
background: #f8d7da;
|
|||
|
|
color: #721c24;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-section {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(2, 1fr);
|
|||
|
|
gap: 16px;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 1024px) {
|
|||
|
|
.chart-section {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-card {
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 24px;
|
|||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-card.full-width {
|
|||
|
|
grid-column: 1 / -1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-card h2 {
|
|||
|
|
font-size: 20px;
|
|||
|
|
color: #262626;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
padding-bottom: 12px;
|
|||
|
|
border-bottom: 1px solid #f0f0f0;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-card h2 .icon {
|
|||
|
|
margin-right: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-container {
|
|||
|
|
height: 400px;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-container.small {
|
|||
|
|
height: 300px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.distributor-list {
|
|||
|
|
list-style: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.distributor-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 16px;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
background: #f8f9fa;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
border: 1px solid #f0f0f0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.distributor-item:hover {
|
|||
|
|
background: #f8f9fa;
|
|||
|
|
transform: translateX(2px);
|
|||
|
|
border-color: #1890ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.distributor-rank {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 18px;
|
|||
|
|
margin-right: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.distributor-rank.top1 {
|
|||
|
|
background: linear-gradient(135deg, #FFD700, #FFA500);
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.distributor-rank.top2 {
|
|||
|
|
background: linear-gradient(135deg, #C0C0C0, #808080);
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.distributor-rank.top3 {
|
|||
|
|
background: linear-gradient(135deg, #CD7F32, #8B4513);
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.distributor-rank.other {
|
|||
|
|
background: #dee2e6;
|
|||
|
|
color: #495057;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.distributor-info {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.distributor-name {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #333;
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.distributor-level {
|
|||
|
|
display: inline-block;
|
|||
|
|
padding: 2px 10px;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
font-size: 11px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin-right: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.level-elite {
|
|||
|
|
background: linear-gradient(135deg, #FFD700, #FFA500);
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.level-senior {
|
|||
|
|
background: linear-gradient(135deg, #C0C0C0, #808080);
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.level-normal {
|
|||
|
|
background: #e9ecef;
|
|||
|
|
color: #495057;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.distributor-meta {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #999;
|
|||
|
|
margin-top: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.distributor-stats {
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.distributor-value {
|
|||
|
|
font-size: 20px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #1890ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.distributor-label {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.roi-card {
|
|||
|
|
background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
|
|||
|
|
color: white;
|
|||
|
|
padding: 24px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.roi-card h3 {
|
|||
|
|
font-size: 18px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
opacity: 0.9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.roi-value {
|
|||
|
|
font-size: 64px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.roi-label {
|
|||
|
|
font-size: 14px;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.roi-formula {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
padding-top: 20px;
|
|||
|
|
border-top: 1px solid rgba(255,255,255,0.3);
|
|||
|
|
font-size: 13px;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="page-header">
|
|||
|
|
<h1 class="page-title">🎯 品牌分销全景分析</h1>
|
|||
|
|
<p class="page-subtitle">全方位监控分销推广效果与分销商效能 · 数据更新时间：2024-01-15 10:30</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h2 class="section-title">📊 分销商团队数据</h2>
|
|||
|
|
<div class="stats-section">
|
|||
|
|
<div class="stats-grid">
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="icon">👥</div>
|
|||
|
|
<h3>品牌分销商总数</h3>
|
|||
|
|
<div class="value">1,247</div>
|
|||
|
|
<div class="sub-value">
|
|||
|
|
本月新增 <span class="trend up">+158</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="icon">⭐</div>
|
|||
|
|
<h3>精英分销商</h3>
|
|||
|
|
<div class="value">89</div>
|
|||
|
|
<div class="sub-value">占比 7.1%</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="icon">🏅</div>
|
|||
|
|
<h3>高级分销商</h3>
|
|||
|
|
<div class="value">312</div>
|
|||
|
|
<div class="sub-value">占比 25.0%</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="icon">🎖️</div>
|
|||
|
|
<h3>普通分销商</h3>
|
|||
|
|
<div class="value">846</div>
|
|||
|
|
<div class="sub-value">占比 67.9%</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="icon">🔥</div>
|
|||
|
|
<h3>活跃分销商</h3>
|
|||
|
|
<div class="value">892</div>
|
|||
|
|
<div class="sub-value">活跃率 71.5% <span class="trend up">+5.2%</span></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="icon">📈</div>
|
|||
|
|
<h3>本月流失分销商</h3>
|
|||
|
|
<div class="value">23</div>
|
|||
|
|
<div class="sub-value">流失率 1.8% <span class="trend down">-0.3%</span></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="chart-section">
|
|||
|
|
<div class="chart-card">
|
|||
|
|
<h2><span class="icon">📊</span>分销商等级分布</h2>
|
|||
|
|
<div class="chart-container small" id="levelChart"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="chart-card">
|
|||
|
|
<h2><span class="icon">📈</span>分销商招募趋势（近6个月）</h2>
|
|||
|
|
<div class="chart-container small" id="recruitChart"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h2 class="section-title">💰 分销业绩数据</h2>
|
|||
|
|
<div class="stats-section">
|
|||
|
|
<div class="stats-grid">
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="icon">📦</div>
|
|||
|
|
<h3>分销订单总量</h3>
|
|||
|
|
<div class="value">5,682</div>
|
|||
|
|
<div class="sub-value">
|
|||
|
|
占总订单 44.2% <span class="trend up">+3.8%</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="icon">💎</div>
|
|||
|
|
<h3>分销GMV贡献</h3>
|
|||
|
|
<div class="value">¥378万</div>
|
|||
|
|
<div class="sub-value">
|
|||
|
|
占总GMV 44.1% <span class="trend up">+4.2%</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="icon">👤</div>
|
|||
|
|
<h3>人均分销订单</h3>
|
|||
|
|
<div class="value">6.4</div>
|
|||
|
|
<div class="sub-value">单/分销商 <span class="trend up">+0.8</span></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="icon">💵</div>
|
|||
|
|
<h3>人均分销金额</h3>
|
|||
|
|
<div class="value">¥4,269</div>
|
|||
|
|
<div class="sub-value">元/分销商 <span class="trend up">+512</span></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="chart-section">
|
|||
|
|
<div class="chart-card">
|
|||
|
|
<h2><span class="icon">🔄</span>分销订单 vs 自然订单占比</h2>
|
|||
|
|
<div class="chart-container small" id="orderTypeChart"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="chart-card roi-card">
|
|||
|
|
<h3>🎯 分销ROI分析</h3>
|
|||
|
|
<div class="roi-value">285%</div>
|
|||
|
|
<div class="roi-label">投资回报率</div>
|
|||
|
|
<div class="roi-formula">
|
|||
|
|
分销收益：¥378万 / 佣金成本：¥132.6万 = 2.85
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-top: 15px; font-size: 13px;">
|
|||
|
|
<div>✓ 分销带来收益：¥378万</div>
|
|||
|
|
<div>✓ 分销佣金支出：¥132.6万</div>
|
|||
|
|
<div>✓ 净收益：¥245.4万</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h2 class="section-title">🏆 分销商效能分析</h2>
|
|||
|
|
|
|||
|
|
<div class="chart-section">
|
|||
|
|
<div class="chart-card">
|
|||
|
|
<h2><span class="icon">👑</span>业绩TOP10分销商排行榜</h2>
|
|||
|
|
<ul class="distributor-list">
|
|||
|
|
<li class="distributor-item">
|
|||
|
|
<div class="distributor-rank top1">1</div>
|
|||
|
|
<div class="distributor-info">
|
|||
|
|
<div class="distributor-name">
|
|||
|
|
张晓明
|
|||
|
|
<span class="distributor-level level-elite">精英分销商</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="distributor-meta">
|
|||
|
|
团队规模：128人 · 本月订单：356单 · 加入：2023-03
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="distributor-stats">
|
|||
|
|
<div class="distributor-value">¥45.8万</div>
|
|||
|
|
<div class="distributor-label">本月业绩</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="distributor-item">
|
|||
|
|
<div class="distributor-rank top2">2</div>
|
|||
|
|
<div class="distributor-info">
|
|||
|
|
<div class="distributor-name">
|
|||
|
|
李芳
|
|||
|
|
<span class="distributor-level level-elite">精英分销商</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="distributor-meta">
|
|||
|
|
团队规模：96人 · 本月订单：289单 · 加入：2023-05
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="distributor-stats">
|
|||
|
|
<div class="distributor-value">¥38.2万</div>
|
|||
|
|
<div class="distributor-label">本月业绩</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="distributor-item">
|
|||
|
|
<div class="distributor-rank top3">3</div>
|
|||
|
|
<div class="distributor-info">
|
|||
|
|
<div class="distributor-name">
|
|||
|
|
王建国
|
|||
|
|
<span class="distributor-level level-elite">精英分销商</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="distributor-meta">
|
|||
|
|
团队规模：82人 · 本月订单：245单 · 加入：2023-06
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="distributor-stats">
|
|||
|
|
<div class="distributor-value">¥32.6万</div>
|
|||
|
|
<div class="distributor-label">本月业绩</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="distributor-item">
|
|||
|
|
<div class="distributor-rank other">4</div>
|
|||
|
|
<div class="distributor-info">
|
|||
|
|
<div class="distributor-name">
|
|||
|
|
刘静
|
|||
|
|
<span class="distributor-level level-senior">高级分销商</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="distributor-meta">
|
|||
|
|
团队规模：65人 · 本月订单：198单 · 加入：2023-07
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="distributor-stats">
|
|||
|
|
<div class="distributor-value">¥28.4万</div>
|
|||
|
|
<div class="distributor-label">本月业绩</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="distributor-item">
|
|||
|
|
<div class="distributor-rank other">5</div>
|
|||
|
|
<div class="distributor-info">
|
|||
|
|
<div class="distributor-name">
|
|||
|
|
陈伟
|
|||
|
|
<span class="distributor-level level-senior">高级分销商</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="distributor-meta">
|
|||
|
|
团队规模：58人 · 本月订单：176单 · 加入：2023-08
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="distributor-stats">
|
|||
|
|
<div class="distributor-value">¥24.7万</div>
|
|||
|
|
<div class="distributor-label">本月业绩</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="distributor-item">
|
|||
|
|
<div class="distributor-rank other">6</div>
|
|||
|
|
<div class="distributor-info">
|
|||
|
|
<div class="distributor-name">
|
|||
|
|
赵敏
|
|||
|
|
<span class="distributor-level level-senior">高级分销商</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="distributor-meta">
|
|||
|
|
团队规模：48人 · 本月订单：152单 · 加入：2023-09
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="distributor-stats">
|
|||
|
|
<div class="distributor-value">¥21.3万</div>
|
|||
|
|
<div class="distributor-label">本月业绩</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="distributor-item">
|
|||
|
|
<div class="distributor-rank other">7</div>
|
|||
|
|
<div class="distributor-info">
|
|||
|
|
<div class="distributor-name">
|
|||
|
|
周杰
|
|||
|
|
<span class="distributor-level level-senior">高级分销商</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="distributor-meta">
|
|||
|
|
团队规模：42人 · 本月订单：134单 · 加入：2023-10
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="distributor-stats">
|
|||
|
|
<div class="distributor-value">¥18.9万</div>
|
|||
|
|
<div class="distributor-label">本月业绩</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="distributor-item">
|
|||
|
|
<div class="distributor-rank other">8</div>
|
|||
|
|
<div class="distributor-info">
|
|||
|
|
<div class="distributor-name">
|
|||
|
|
孙丽
|
|||
|
|
<span class="distributor-level level-normal">普通分销商</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="distributor-meta">
|
|||
|
|
团队规模：35人 · 本月订单：118单 · 加入：2023-11
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="distributor-stats">
|
|||
|
|
<div class="distributor-value">¥16.2万</div>
|
|||
|
|
<div class="distributor-label">本月业绩</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="distributor-item">
|
|||
|
|
<div class="distributor-rank other">9</div>
|
|||
|
|
<div class="distributor-info">
|
|||
|
|
<div class="distributor-name">
|
|||
|
|
郑强
|
|||
|
|
<span class="distributor-level level-normal">普通分销商</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="distributor-meta">
|
|||
|
|
团队规模：28人 · 本月订单：95单 · 加入：2023-12
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="distributor-stats">
|
|||
|
|
<div class="distributor-value">¥13.8万</div>
|
|||
|
|
<div class="distributor-label">本月业绩</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="distributor-item">
|
|||
|
|
<div class="distributor-rank other">10</div>
|
|||
|
|
<div class="distributor-info">
|
|||
|
|
<div class="distributor-name">
|
|||
|
|
吴悠
|
|||
|
|
<span class="distributor-level level-normal">普通分销商</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="distributor-meta">
|
|||
|
|
团队规模：22人 · 本月订单：82单 · 加入：2024-01
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="distributor-stats">
|
|||
|
|
<div class="distributor-value">¥11.6万</div>
|
|||
|
|
<div class="distributor-label">本月业绩</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="chart-card">
|
|||
|
|
<h2><span class="icon">📊</span>分销商层级业绩对比</h2>
|
|||
|
|
<div class="chart-container" id="levelPerformanceChart"></div>
|
|||
|
|
|
|||
|
|
<h2 style="margin-top: 30px;"><span class="icon">🌳</span>团队裂变效果分析</h2>
|
|||
|
|
<div class="chart-container" id="teamGrowthChart"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// 分销商等级分布饼图
|
|||
|
|
const levelChart = echarts.init(document.getElementById('levelChart'));
|
|||
|
|
const levelOption = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item',
|
|||
|
|
formatter: '{b}: {c}人 ({d}%)'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
orient: 'vertical',
|
|||
|
|
right: '10%',
|
|||
|
|
top: 'center'
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
name: '分销商等级',
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: ['40%', '70%'],
|
|||
|
|
center: ['35%', '50%'],
|
|||
|
|
avoidLabelOverlap: false,
|
|||
|
|
itemStyle: {
|
|||
|
|
borderRadius: 10,
|
|||
|
|
borderColor: '#fff',
|
|||
|
|
borderWidth: 2
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
formatter: '{b}\n{c}人'
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
fontSize: 16,
|
|||
|
|
fontWeight: 'bold'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: [
|
|||
|
|
{ value: 89, name: '精英分销商', itemStyle: { color: '#FFD700' } },
|
|||
|
|
{ value: 312, name: '高级分销商', itemStyle: { color: '#C0C0C0' } },
|
|||
|
|
{ value: 846, name: '普通分销商', itemStyle: { color: '#CD7F32' } }
|
|||
|
|
]
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
levelChart.setOption(levelOption);
|
|||
|
|
|
|||
|
|
// 分销商招募趋势折线图
|
|||
|
|
const recruitChart = echarts.init(document.getElementById('recruitChart'));
|
|||
|
|
const recruitOption = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: ['新增分销商', '流失分销商'],
|
|||
|
|
top: 10
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '3%',
|
|||
|
|
right: '4%',
|
|||
|
|
bottom: '3%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
boundaryGap: false,
|
|||
|
|
data: ['8月', '9月', '10月', '11月', '12月', '1月']
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
name: '人数'
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '新增分销商',
|
|||
|
|
type: 'line',
|
|||
|
|
smooth: true,
|
|||
|
|
data: [98, 112, 135, 142, 156, 158],
|
|||
|
|
itemStyle: { color: '#5cb85c' },
|
|||
|
|
areaStyle: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|||
|
|
{ offset: 0, color: 'rgba(92, 184, 92, 0.3)' },
|
|||
|
|
{ offset: 1, color: 'rgba(92, 184, 92, 0.05)' }
|
|||
|
|
])
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '流失分销商',
|
|||
|
|
type: 'line',
|
|||
|
|
smooth: true,
|
|||
|
|
data: [15, 18, 22, 19, 25, 23],
|
|||
|
|
itemStyle: { color: '#d9534f' },
|
|||
|
|
areaStyle: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|||
|
|
{ offset: 0, color: 'rgba(217, 83, 79, 0.3)' },
|
|||
|
|
{ offset: 1, color: 'rgba(217, 83, 79, 0.05)' }
|
|||
|
|
])
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
recruitChart.setOption(recruitOption);
|
|||
|
|
|
|||
|
|
// 订单类型占比饼图
|
|||
|
|
const orderTypeChart = echarts.init(document.getElementById('orderTypeChart'));
|
|||
|
|
const orderTypeOption = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item',
|
|||
|
|
formatter: '{b}: {c}单 ({d}%)'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
orient: 'vertical',
|
|||
|
|
right: '10%',
|
|||
|
|
top: 'center'
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
name: '订单类型',
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: ['40%', '70%'],
|
|||
|
|
center: ['35%', '50%'],
|
|||
|
|
avoidLabelOverlap: false,
|
|||
|
|
itemStyle: {
|
|||
|
|
borderRadius: 10,
|
|||
|
|
borderColor: '#fff',
|
|||
|
|
borderWidth: 2
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
formatter: '{b}\n{c}单\n({d}%)'
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
fontSize: 16,
|
|||
|
|
fontWeight: 'bold'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: [
|
|||
|
|
{
|
|||
|
|
value: 5682,
|
|||
|
|
name: '分销订单',
|
|||
|
|
itemStyle: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|||
|
|
{ offset: 0, color: '#f093fb' },
|
|||
|
|
{ offset: 1, color: '#f5576c' }
|
|||
|
|
])
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 7165,
|
|||
|
|
name: '自然订单',
|
|||
|
|
itemStyle: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|||
|
|
{ offset: 0, color: '#4facfe' },
|
|||
|
|
{ offset: 1, color: '#00f2fe' }
|
|||
|
|
])
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
orderTypeChart.setOption(orderTypeOption);
|
|||
|
|
|
|||
|
|
// 分销商层级业绩对比柱状图
|
|||
|
|
const levelPerformanceChart = echarts.init(document.getElementById('levelPerformanceChart'));
|
|||
|
|
const levelPerformanceOption = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: { type: 'shadow' }
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: ['人均订单', '人均GMV(千元)'],
|
|||
|
|
top: 10
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '3%',
|
|||
|
|
right: '4%',
|
|||
|
|
bottom: '3%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: ['普通分销商', '高级分销商', '精英分销商']
|
|||
|
|
},
|
|||
|
|
yAxis: [
|
|||
|
|
{
|
|||
|
|
type: 'value',
|
|||
|
|
name: '订单数(单)',
|
|||
|
|
position: 'left'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'value',
|
|||
|
|
name: 'GMV(千元)',
|
|||
|
|
position: 'right'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '人均订单',
|
|||
|
|
type: 'bar',
|
|||
|
|
data: [4.2, 8.5, 15.3],
|
|||
|
|
itemStyle: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|||
|
|
{ offset: 0, color: '#f093fb' },
|
|||
|
|
{ offset: 1, color: '#f5576c' }
|
|||
|
|
])
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '人均GMV(千元)',
|
|||
|
|
type: 'bar',
|
|||
|
|
yAxisIndex: 1,
|
|||
|
|
data: [2.8, 6.2, 12.5],
|
|||
|
|
itemStyle: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|||
|
|
{ offset: 0, color: '#4facfe' },
|
|||
|
|
{ offset: 1, color: '#00f2fe' }
|
|||
|
|
])
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
levelPerformanceChart.setOption(levelPerformanceOption);
|
|||
|
|
|
|||
|
|
// 团队裂变效果分析
|
|||
|
|
const teamGrowthChart = echarts.init(document.getElementById('teamGrowthChart'));
|
|||
|
|
const teamGrowthOption = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: { type: 'shadow' }
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: ['直接下级', '间接下级'],
|
|||
|
|
top: 10
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '3%',
|
|||
|
|
right: '4%',
|
|||
|
|
bottom: '3%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: ['TOP1', 'TOP2', 'TOP3', 'TOP4', 'TOP5', 'TOP6', 'TOP7', 'TOP8', 'TOP9', 'TOP10']
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
name: '团队人数'
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '直接下级',
|
|||
|
|
type: 'bar',
|
|||
|
|
stack: 'total',
|
|||
|
|
data: [35, 28, 24, 19, 17, 14, 12, 10, 8, 6],
|
|||
|
|
itemStyle: { color: '#5cb85c' }
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '间接下级',
|
|||
|
|
type: 'bar',
|
|||
|
|
stack: 'total',
|
|||
|
|
data: [93, 68, 58, 46, 41, 34, 30, 25, 20, 16],
|
|||
|
|
itemStyle: { color: '#5bc0de' }
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
teamGrowthChart.setOption(teamGrowthOption);
|
|||
|
|
|
|||
|
|
// 响应式
|
|||
|
|
window.addEventListener('resize', function() {
|
|||
|
|
levelChart.resize();
|
|||
|
|
recruitChart.resize();
|
|||
|
|
orderTypeChart.resize();
|
|||
|
|
levelPerformanceChart.resize();
|
|||
|
|
teamGrowthChart.resize();
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|