综述: 新增品牌数据分析功能模块
- 新增连锁单位业绩排行榜页面，展示各连锁单位的销售、订单、客户等核心业务指标排行 - 新增品牌爆款商品榜页面，分析品牌商品的销量、销售额、好评率等维度表现 - 新增品牌分销全景分析页面，全面监控分销商团队、分销业绩和分销商效能数据 - 三个页面均采用响应式设计，包含丰富的数据可视化图表和排行榜展示 Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
This commit is contained in:
parent
5c773a9bd4
commit
22f5cdaf96
|
|
@ -0,0 +1,892 @@
|
||||||
|
<!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>
|
||||||
|
|
@ -0,0 +1,777 @@
|
||||||
|
<!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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-section {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(1, 1fr);
|
||||||
|
gap: 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 24px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||||
|
border-color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-rank {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 10px;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 18px;
|
||||||
|
z-index: 10;
|
||||||
|
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-rank.top1 {
|
||||||
|
background: linear-gradient(135deg, #FFD700, #FFA500);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-rank.top2 {
|
||||||
|
background: linear-gradient(135deg, #C0C0C0, #808080);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-rank.top3 {
|
||||||
|
background: linear-gradient(135deg, #CD7F32, #8B4513);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-rank.other {
|
||||||
|
background: rgba(255, 255, 255, 0.9);
|
||||||
|
color: #495057;
|
||||||
|
border: 2px solid #dee2e6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
object-fit: cover;
|
||||||
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-info {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-name {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
height: 40px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-stats {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-price {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #e74c3c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-sales {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-meta {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 8px;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-rating {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #f39c12;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-rating .stars {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-store {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge.hot {
|
||||||
|
background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge.new {
|
||||||
|
background: linear-gradient(135deg, #4facfe, #00f2fe);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-tags {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-tag {
|
||||||
|
padding: 6px 16px;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 13px;
|
||||||
|
background: #f8f9fa;
|
||||||
|
color: #666;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-tag:hover {
|
||||||
|
background: #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-tag.active {
|
||||||
|
background: #1890ff;
|
||||||
|
color: white;
|
||||||
|
border-color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-container {
|
||||||
|
height: 400px;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<div class="stats-section">
|
||||||
|
<div class="stats-grid">
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="icon">📦</div>
|
||||||
|
<h3>品牌在售商品总数</h3>
|
||||||
|
<div class="value">2,847</div>
|
||||||
|
<div class="sub-value">覆盖28家连锁单位</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="icon">🔥</div>
|
||||||
|
<h3>本月爆款商品数</h3>
|
||||||
|
<div class="value">156</div>
|
||||||
|
<div class="sub-value">销量≥100件的商品</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="icon">⭐</div>
|
||||||
|
<h3>高评分商品数</h3>
|
||||||
|
<div class="value">1,243</div>
|
||||||
|
<div class="sub-value">评分≥4.5分的商品</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="icon">💎</div>
|
||||||
|
<h3>TOP10商品贡献率</h3>
|
||||||
|
<div class="value">32.5%</div>
|
||||||
|
<div class="sub-value">占品牌总销售额</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chart-card">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2><span class="icon">🏆</span>销量TOP10商品</h2>
|
||||||
|
<div class="filter-tags">
|
||||||
|
<div class="filter-tag active">本月</div>
|
||||||
|
<div class="filter-tag">近3月</div>
|
||||||
|
<div class="filter-tag">全部</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-grid">
|
||||||
|
<div class="product-card">
|
||||||
|
<div class="product-rank top1">1</div>
|
||||||
|
<img src="https://via.placeholder.com/200x200/81C784/FFFFFF?text=%E6%96%B0%E9%B2%9C%E8%94%AC%E8%8F%9C" alt="新鲜蔬菜" class="product-image">
|
||||||
|
<div class="product-info">
|
||||||
|
<div class="product-name">
|
||||||
|
有机生菜 新鲜采摘
|
||||||
|
<span class="badge hot">热销</span>
|
||||||
|
</div>
|
||||||
|
<div class="product-stats">
|
||||||
|
<div class="product-price">¥8.9</div>
|
||||||
|
<div class="product-sales">月销 3,256件</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-meta">
|
||||||
|
<div class="product-rating">
|
||||||
|
<span class="stars">⭐⭐⭐⭐⭐</span>
|
||||||
|
<span>4.9</span>
|
||||||
|
</div>
|
||||||
|
<div class="product-store">12家在售</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card">
|
||||||
|
<div class="product-rank top2">2</div>
|
||||||
|
<img src="https://via.placeholder.com/200x200/E57373/FFFFFF?text=%E7%8C%AA%E8%82%89" alt="猪肉" class="product-image">
|
||||||
|
<div class="product-info">
|
||||||
|
<div class="product-name">
|
||||||
|
精选五花肉 500g
|
||||||
|
<span class="badge hot">热销</span>
|
||||||
|
</div>
|
||||||
|
<div class="product-stats">
|
||||||
|
<div class="product-price">¥22.8</div>
|
||||||
|
<div class="product-sales">月销 2,847件</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-meta">
|
||||||
|
<div class="product-rating">
|
||||||
|
<span class="stars">⭐⭐⭐⭐⭐</span>
|
||||||
|
<span>4.8</span>
|
||||||
|
</div>
|
||||||
|
<div class="product-store">15家在售</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card">
|
||||||
|
<div class="product-rank top3">3</div>
|
||||||
|
<img src="https://via.placeholder.com/200x200/64B5F6/FFFFFF?text=%E6%B5%B7%E9%B2%9C" alt="海鲜" class="product-image">
|
||||||
|
<div class="product-info">
|
||||||
|
<div class="product-name">
|
||||||
|
新鲜活虾 大号 300g
|
||||||
|
</div>
|
||||||
|
<div class="product-stats">
|
||||||
|
<div class="product-price">¥35.9</div>
|
||||||
|
<div class="product-sales">月销 2,134件</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-meta">
|
||||||
|
<div class="product-rating">
|
||||||
|
<span class="stars">⭐⭐⭐⭐⭐</span>
|
||||||
|
<span>4.9</span>
|
||||||
|
</div>
|
||||||
|
<div class="product-store">8家在售</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card">
|
||||||
|
<div class="product-rank other">4</div>
|
||||||
|
<img src="https://via.placeholder.com/200x200/FFD54F/FFFFFF?text=%E6%B0%B4%E6%9E%9C" alt="水果" class="product-image">
|
||||||
|
<div class="product-info">
|
||||||
|
<div class="product-name">
|
||||||
|
进口苹果 烟台红富士
|
||||||
|
<span class="badge new">新品</span>
|
||||||
|
</div>
|
||||||
|
<div class="product-stats">
|
||||||
|
<div class="product-price">¥12.9</div>
|
||||||
|
<div class="product-sales">月销 1,956件</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-meta">
|
||||||
|
<div class="product-rating">
|
||||||
|
<span class="stars">⭐⭐⭐⭐⭐</span>
|
||||||
|
<span>4.7</span>
|
||||||
|
</div>
|
||||||
|
<div class="product-store">18家在售</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card">
|
||||||
|
<div class="product-rank other">5</div>
|
||||||
|
<img src="https://via.placeholder.com/200x200/BA68C8/FFFFFF?text=%E7%A6%BD%E8%9B%8B" alt="禽蛋" class="product-image">
|
||||||
|
<div class="product-info">
|
||||||
|
<div class="product-name">
|
||||||
|
土鸡蛋 农家散养 10枚
|
||||||
|
</div>
|
||||||
|
<div class="product-stats">
|
||||||
|
<div class="product-price">¥18.8</div>
|
||||||
|
<div class="product-sales">月销 1,782件</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-meta">
|
||||||
|
<div class="product-rating">
|
||||||
|
<span class="stars">⭐⭐⭐⭐⭐</span>
|
||||||
|
<span>4.8</span>
|
||||||
|
</div>
|
||||||
|
<div class="product-store">14家在售</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card">
|
||||||
|
<div class="product-rank other">6</div>
|
||||||
|
<img src="https://via.placeholder.com/200x200/4DB6AC/FFFFFF?text=%E8%B1%86%E5%88%B6%E5%93%81" alt="豆制品" class="product-image">
|
||||||
|
<div class="product-info">
|
||||||
|
<div class="product-name">
|
||||||
|
手工豆腐 新鲜现做
|
||||||
|
</div>
|
||||||
|
<div class="product-stats">
|
||||||
|
<div class="product-price">¥6.9</div>
|
||||||
|
<div class="product-sales">月销 1,623件</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-meta">
|
||||||
|
<div class="product-rating">
|
||||||
|
<span class="stars">⭐⭐⭐⭐</span>
|
||||||
|
<span>4.6</span>
|
||||||
|
</div>
|
||||||
|
<div class="product-store">10家在售</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card">
|
||||||
|
<div class="product-rank other">7</div>
|
||||||
|
<img src="https://via.placeholder.com/200x200/FFB74D/FFFFFF?text=%E7%B2%AE%E6%B2%B9" alt="粮油" class="product-image">
|
||||||
|
<div class="product-info">
|
||||||
|
<div class="product-name">
|
||||||
|
东北大米 5kg 2023新米
|
||||||
|
</div>
|
||||||
|
<div class="product-stats">
|
||||||
|
<div class="product-price">¥39.9</div>
|
||||||
|
<div class="product-sales">月销 1,456件</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-meta">
|
||||||
|
<div class="product-rating">
|
||||||
|
<span class="stars">⭐⭐⭐⭐⭐</span>
|
||||||
|
<span>4.9</span>
|
||||||
|
</div>
|
||||||
|
<div class="product-store">16家在售</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card">
|
||||||
|
<div class="product-rank other">8</div>
|
||||||
|
<img src="https://via.placeholder.com/200x200/A1887F/FFFFFF?text=%E8%B0%83%E5%91%B3%E5%93%81" alt="调味品" class="product-image">
|
||||||
|
<div class="product-info">
|
||||||
|
<div class="product-name">
|
||||||
|
品牌酱油 500ml 特级
|
||||||
|
</div>
|
||||||
|
<div class="product-stats">
|
||||||
|
<div class="product-price">¥15.9</div>
|
||||||
|
<div class="product-sales">月销 1,287件</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-meta">
|
||||||
|
<div class="product-rating">
|
||||||
|
<span class="stars">⭐⭐⭐⭐</span>
|
||||||
|
<span>4.5</span>
|
||||||
|
</div>
|
||||||
|
<div class="product-store">20家在售</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card">
|
||||||
|
<div class="product-rank other">9</div>
|
||||||
|
<img src="https://via.placeholder.com/200x200/90A4AE/FFFFFF?text=%E9%B1%BC%E7%B1%BB" alt="鱼类" class="product-image">
|
||||||
|
<div class="product-info">
|
||||||
|
<div class="product-name">
|
||||||
|
活鲈鱼 新鲜现杀 500g
|
||||||
|
</div>
|
||||||
|
<div class="product-stats">
|
||||||
|
<div class="product-price">¥28.8</div>
|
||||||
|
<div class="product-sales">月销 1,123件</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-meta">
|
||||||
|
<div class="product-rating">
|
||||||
|
<span class="stars">⭐⭐⭐⭐⭐</span>
|
||||||
|
<span>4.7</span>
|
||||||
|
</div>
|
||||||
|
<div class="product-store">9家在售</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card">
|
||||||
|
<div class="product-rank other">10</div>
|
||||||
|
<img src="https://via.placeholder.com/200x200/EF5350/FFFFFF?text=%E7%89%9B%E8%82%89" alt="牛肉" class="product-image">
|
||||||
|
<div class="product-info">
|
||||||
|
<div class="product-name">
|
||||||
|
澳洲牛腩 精选切块 500g
|
||||||
|
</div>
|
||||||
|
<div class="product-stats">
|
||||||
|
<div class="product-price">¥48.9</div>
|
||||||
|
<div class="product-sales">月销 1,056件</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-meta">
|
||||||
|
<div class="product-rating">
|
||||||
|
<span class="stars">⭐⭐⭐⭐⭐</span>
|
||||||
|
<span>4.8</span>
|
||||||
|
</div>
|
||||||
|
<div class="product-store">11家在售</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chart-container" id="salesChart"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chart-card">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2><span class="icon">💰</span>销售额TOP10商品</h2>
|
||||||
|
</div>
|
||||||
|
<div class="chart-container" id="revenueChart"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chart-card">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2><span class="icon">⭐</span>好评率TOP10商品</h2>
|
||||||
|
</div>
|
||||||
|
<div class="chart-container" id="ratingChart"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 销量TOP10柱状图
|
||||||
|
const salesChart = echarts.init(document.getElementById('salesChart'));
|
||||||
|
const salesOption = {
|
||||||
|
title: {
|
||||||
|
text: '本月销量TOP10趋势图',
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: { type: 'shadow' }
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['有机生菜', '五花肉', '活虾', '苹果', '土鸡蛋', '豆腐', '大米', '酱油', '鲈鱼', '牛腩'],
|
||||||
|
axisLabel: {
|
||||||
|
rotate: 30,
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
name: '销量(件)'
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [3256, 2847, 2134, 1956, 1782, 1623, 1456, 1287, 1123, 1056],
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: '#4facfe' },
|
||||||
|
{ offset: 1, color: '#00f2fe' }
|
||||||
|
]),
|
||||||
|
borderRadius: [8, 8, 0, 0]
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
formatter: '{c}件'
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
salesChart.setOption(salesOption);
|
||||||
|
|
||||||
|
// 销售额TOP10柱状图
|
||||||
|
const revenueChart = echarts.init(document.getElementById('revenueChart'));
|
||||||
|
const revenueOption = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: { type: 'shadow' }
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'value',
|
||||||
|
name: '销售额(万元)'
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['有机生菜', '活虾', '澳洲牛腩', '五花肉', '大米', '鲈鱼', '苹果', '土鸡蛋', '酱油', '豆腐'].reverse(),
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: '销售额',
|
||||||
|
type: 'bar',
|
||||||
|
data: [2.9, 7.7, 5.2, 6.5, 5.8, 3.2, 2.5, 3.3, 2.0, 1.1].reverse(),
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||||
|
{ offset: 0, color: '#fa709a' },
|
||||||
|
{ offset: 1, color: '#fee140' }
|
||||||
|
]),
|
||||||
|
borderRadius: [0, 8, 8, 0]
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'right',
|
||||||
|
formatter: '¥{c}万'
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
revenueChart.setOption(revenueOption);
|
||||||
|
|
||||||
|
// 好评率TOP10雷达图
|
||||||
|
const ratingChart = echarts.init(document.getElementById('ratingChart'));
|
||||||
|
const ratingOption = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['评分', '评价数'],
|
||||||
|
top: 10
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['有机生菜', '活虾', '大米', '牛腩', '土鸡蛋', '鲈鱼', '五花肉', '苹果', '豆腐', '酱油'],
|
||||||
|
axisLabel: {
|
||||||
|
rotate: 30,
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '评分',
|
||||||
|
min: 0,
|
||||||
|
max: 5,
|
||||||
|
interval: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '评价数',
|
||||||
|
min: 0,
|
||||||
|
max: 3000
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '评分',
|
||||||
|
type: 'line',
|
||||||
|
data: [4.9, 4.9, 4.9, 4.8, 4.8, 4.7, 4.8, 4.7, 4.6, 4.5],
|
||||||
|
itemStyle: { color: '#FFD700' },
|
||||||
|
lineStyle: { width: 3 },
|
||||||
|
smooth: true,
|
||||||
|
areaStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: 'rgba(255, 215, 0, 0.3)' },
|
||||||
|
{ offset: 1, color: 'rgba(255, 215, 0, 0.05)' }
|
||||||
|
])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '评价数',
|
||||||
|
type: 'bar',
|
||||||
|
yAxisIndex: 1,
|
||||||
|
data: [2856, 1987, 1765, 1523, 1456, 1289, 2134, 1678, 1234, 1098],
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: '#4facfe' },
|
||||||
|
{ offset: 1, color: '#00f2fe' }
|
||||||
|
])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
ratingChart.setOption(ratingOption);
|
||||||
|
|
||||||
|
// 响应式
|
||||||
|
window.addEventListener('resize', function() {
|
||||||
|
salesChart.resize();
|
||||||
|
revenueChart.resize();
|
||||||
|
ratingChart.resize();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 筛选标签交互
|
||||||
|
document.querySelectorAll('.filter-tag').forEach(tag => {
|
||||||
|
tag.addEventListener('click', function() {
|
||||||
|
document.querySelectorAll('.filter-tag').forEach(t => t.classList.remove('active'));
|
||||||
|
this.classList.add('active');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,550 @@
|
||||||
|
<!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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item:hover {
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 .label {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 h2 {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #262626;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-container {
|
||||||
|
height: 400px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ranking-list {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ranking-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ranking-item:hover {
|
||||||
|
background: #f8f9fa;
|
||||||
|
transform: translateX(2px);
|
||||||
|
border-color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ranking-number {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ranking-number.top1 {
|
||||||
|
background: linear-gradient(135deg, #FFD700, #FFA500);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ranking-number.top2 {
|
||||||
|
background: linear-gradient(135deg, #C0C0C0, #808080);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ranking-number.top3 {
|
||||||
|
background: linear-gradient(135deg, #CD7F32, #8B4513);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ranking-number.other {
|
||||||
|
background: #dee2e6;
|
||||||
|
color: #495057;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ranking-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ranking-name {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ranking-location {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ranking-value {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ranking-unit {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trend-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 4px 12px;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trend-up {
|
||||||
|
background: #d4edda;
|
||||||
|
color: #155724;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trend-down {
|
||||||
|
background: #f8d7da;
|
||||||
|
color: #721c24;
|
||||||
|
}
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<div class="stats-section">
|
||||||
|
<div class="stats-grid">
|
||||||
|
<div class="stat-item">
|
||||||
|
<h3>连锁单位总数</h3>
|
||||||
|
<div class="value">28</div>
|
||||||
|
<div class="label">家连锁市场/店铺</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<h3>本月总销售额</h3>
|
||||||
|
<div class="value">¥856万</div>
|
||||||
|
<div class="label">环比上月 +23.5%</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<h3>本月总订单量</h3>
|
||||||
|
<div class="value">12,847</div>
|
||||||
|
<div class="label">环比上月 +18.2%</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<h3>本月总客户数</h3>
|
||||||
|
<div class="value">8,563</div>
|
||||||
|
<div class="label">环比上月 +15.8%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chart-section">
|
||||||
|
<div class="chart-card">
|
||||||
|
<h2>🏆 销售额TOP10排行榜</h2>
|
||||||
|
<ul class="ranking-list">
|
||||||
|
<li class="ranking-item">
|
||||||
|
<div class="ranking-number top1">1</div>
|
||||||
|
<div class="ranking-info">
|
||||||
|
<div class="ranking-name">朝阳菜市场（望京店）</div>
|
||||||
|
<div class="ranking-location">📍 北京市朝阳区</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="ranking-value">¥128.5万</span>
|
||||||
|
<span class="trend-badge trend-up">↑ 32%</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="ranking-item">
|
||||||
|
<div class="ranking-number top2">2</div>
|
||||||
|
<div class="ranking-info">
|
||||||
|
<div class="ranking-name">海淀菜市场（中关村店）</div>
|
||||||
|
<div class="ranking-location">📍 北京市海淀区</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="ranking-value">¥115.2万</span>
|
||||||
|
<span class="trend-badge trend-up">↑ 28%</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="ranking-item">
|
||||||
|
<div class="ranking-number top3">3</div>
|
||||||
|
<div class="ranking-info">
|
||||||
|
<div class="ranking-name">西城菜市场（金融街店）</div>
|
||||||
|
<div class="ranking-location">📍 北京市西城区</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="ranking-value">¥98.7万</span>
|
||||||
|
<span class="trend-badge trend-up">↑ 15%</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="ranking-item">
|
||||||
|
<div class="ranking-number other">4</div>
|
||||||
|
<div class="ranking-info">
|
||||||
|
<div class="ranking-name">东城菜市场（国贸店）</div>
|
||||||
|
<div class="ranking-location">📍 北京市东城区</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="ranking-value">¥87.3万</span>
|
||||||
|
<span class="trend-badge trend-up">↑ 22%</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="ranking-item">
|
||||||
|
<div class="ranking-number other">5</div>
|
||||||
|
<div class="ranking-info">
|
||||||
|
<div class="ranking-name">丰台菜市场（科技园店）</div>
|
||||||
|
<div class="ranking-location">📍 北京市丰台区</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="ranking-value">¥76.8万</span>
|
||||||
|
<span class="trend-badge trend-up">↑ 18%</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="ranking-item">
|
||||||
|
<div class="ranking-number other">6</div>
|
||||||
|
<div class="ranking-info">
|
||||||
|
<div class="ranking-name">石景山菜市场（万达店）</div>
|
||||||
|
<div class="ranking-location">📍 北京市石景山区</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="ranking-value">¥65.4万</span>
|
||||||
|
<span class="trend-badge trend-up">↑ 12%</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="ranking-item">
|
||||||
|
<div class="ranking-number other">7</div>
|
||||||
|
<div class="ranking-info">
|
||||||
|
<div class="ranking-name">通州菜市场（副中心店）</div>
|
||||||
|
<div class="ranking-location">📍 北京市通州区</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="ranking-value">¥58.9万</span>
|
||||||
|
<span class="trend-badge trend-up">↑ 25%</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="ranking-item">
|
||||||
|
<div class="ranking-number other">8</div>
|
||||||
|
<div class="ranking-info">
|
||||||
|
<div class="ranking-name">昌平菜市场（回龙观店）</div>
|
||||||
|
<div class="ranking-location">📍 北京市昌平区</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="ranking-value">¥52.3万</span>
|
||||||
|
<span class="trend-badge trend-down">↓ 5%</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="ranking-item">
|
||||||
|
<div class="ranking-number other">9</div>
|
||||||
|
<div class="ranking-info">
|
||||||
|
<div class="ranking-name">大兴菜市场（亦庄店）</div>
|
||||||
|
<div class="ranking-location">📍 北京市大兴区</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="ranking-value">¥48.6万</span>
|
||||||
|
<span class="trend-badge trend-up">↑ 8%</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="ranking-item">
|
||||||
|
<div class="ranking-number other">10</div>
|
||||||
|
<div class="ranking-info">
|
||||||
|
<div class="ranking-name">顺义菜市场（空港店）</div>
|
||||||
|
<div class="ranking-location">📍 北京市顺义区</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="ranking-value">¥42.1万</span>
|
||||||
|
<span class="trend-badge trend-up">↑ 10%</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chart-card">
|
||||||
|
<h2>📦 订单量TOP10排行榜</h2>
|
||||||
|
<div class="chart-container" id="orderChart"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chart-section">
|
||||||
|
<div class="chart-card">
|
||||||
|
<h2>👥 客户量TOP10排行榜</h2>
|
||||||
|
<div class="chart-container" id="customerChart"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chart-card">
|
||||||
|
<h2>📈 增长率TOP10排行榜</h2>
|
||||||
|
<div class="chart-container" id="growthChart"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 订单量排行榜
|
||||||
|
const orderChart = echarts.init(document.getElementById('orderChart'));
|
||||||
|
const orderOption = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: { type: 'shadow' }
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'value',
|
||||||
|
name: '订单量'
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['顺义(空港)', '大兴(亦庄)', '昌平(回龙观)', '通州(副中心)', '石景山(万达)',
|
||||||
|
'丰台(科技园)', '东城(国贸)', '西城(金融街)', '海淀(中关村)', '朝阳(望京)'],
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: '订单量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [582, 635, 698, 758, 823, 945, 1067, 1235, 1456, 1689],
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||||
|
{ offset: 0, color: '#667eea' },
|
||||||
|
{ offset: 1, color: '#764ba2' }
|
||||||
|
])
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'right',
|
||||||
|
formatter: '{c}单'
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
orderChart.setOption(orderOption);
|
||||||
|
|
||||||
|
// 客户量排行榜
|
||||||
|
const customerChart = echarts.init(document.getElementById('customerChart'));
|
||||||
|
const customerOption = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: { type: 'shadow' }
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'value',
|
||||||
|
name: '客户数'
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['顺义(空港)', '大兴(亦庄)', '昌平(回龙观)', '通州(副中心)', '石景山(万达)',
|
||||||
|
'丰台(科技园)', '东城(国贸)', '西城(金融街)', '海淀(中关村)', '朝阳(望京)'],
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: '客户数',
|
||||||
|
type: 'bar',
|
||||||
|
data: [456, 512, 578, 623, 689, 756, 834, 923, 1089, 1267],
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||||
|
{ offset: 0, color: '#f093fb' },
|
||||||
|
{ offset: 1, color: '#f5576c' }
|
||||||
|
])
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'right',
|
||||||
|
formatter: '{c}人'
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
customerChart.setOption(customerOption);
|
||||||
|
|
||||||
|
// 增长率排行榜
|
||||||
|
const growthChart = echarts.init(document.getElementById('growthChart'));
|
||||||
|
const growthOption = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: { type: 'shadow' }
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'value',
|
||||||
|
name: '环比增长率',
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}%'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['石景山(万达)', '西城(金融街)', '大兴(亦庄)', '顺义(空港)', '丰台(科技园)',
|
||||||
|
'东城(国贸)', '通州(副中心)', '海淀(中关村)', '朝阳(望京)', '昌平(天通苑)'],
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: '增长率',
|
||||||
|
type: 'bar',
|
||||||
|
data: [12, 15, 18, 22, 25, 28, 32, 35, 38, 45],
|
||||||
|
itemStyle: {
|
||||||
|
color: function(params) {
|
||||||
|
const colors = [
|
||||||
|
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||||
|
{ offset: 0, color: '#4facfe' },
|
||||||
|
{ offset: 1, color: '#00f2fe' }
|
||||||
|
])
|
||||||
|
];
|
||||||
|
return colors[0];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'right',
|
||||||
|
formatter: '{c}%'
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
growthChart.setOption(growthOption);
|
||||||
|
|
||||||
|
// 响应式
|
||||||
|
window.addEventListener('resize', function() {
|
||||||
|
orderChart.resize();
|
||||||
|
customerChart.resize();
|
||||||
|
growthChart.resize();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue