linbin
/
dm-design
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
dm-design/商家端web/品牌管理/数据分析/品牌分销全景分析.html

1013 lines
35 KiB
HTML
Raw Normal View History

综述: 新增品牌数据分析功能模块 - 新增连锁单位业绩排行榜页面，展示各连锁单位的销售、订单、客户等核心业务指标排行 - 新增品牌爆款商品榜页面，分析品牌商品的销量、销售额、好评率等维度表现 - 新增品牌分销全景分析页面，全面监控分销商团队、分销业绩和分销商效能数据 - 三个页面均采用响应式设计，包含丰富的数据可视化图表和排行榜展示 Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
2025-10-07 20:26:15 +00:00
<!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;
}
综述: 优化品牌数据分析页面功能并更新菜单导航 - 修改主菜单导航链接，将"连锁单位业绩排行榜"更新为"品牌业绩排行榜"，更准确地反映页面功能定位。 - 在品牌分销全景分析页面中新增时间筛选功能模块，支持快速选择预设时间范围（今日、昨日、近7天、近30天）和自定义日期范围查询，提升数据分析的灵活性。 - 在品牌爆款商品榜页面中同样新增时间筛选功能，保持界面风格一致性，用户可根据不同时间维度查看商品销售数据。 - 删除原有的连锁单位业绩排行榜文件，替换为新的品牌业绩排行榜页面。
2025-10-08 09:22:58 +00:00
.time-filter-section {
background: white;
padding: 20px 24px;
margin-bottom: 16px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.time-filter-container {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.filter-label {
font-size: 14px;
color: #666;
font-weight: 500;
white-space: nowrap;
}
.filter-buttons {
display: flex;
gap: 8px;
align-items: center;
}
.filter-btn {
padding: 8px 16px;
border: 1px solid #d9d9d9;
background: white;
color: #666;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s;
outline: none;
}
.filter-btn:hover {
border-color: #1890ff;
color: #1890ff;
}
.filter-btn.active {
background: #1890ff;
color: white;
border-color: #1890ff;
}
.custom-btn {
border-style: dashed;
}
.custom-date-range {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
.date-input {
padding: 8px 12px;
border: 1px solid #d9d9d9;
border-radius: 6px;
font-size: 14px;
outline: none;
}
.date-input:focus {
border-color: #1890ff;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
.date-separator {
color: #999;
font-size: 14px;
}
.query-btn {
padding: 8px 16px;
background: #1890ff;
color: white;
border: none;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s;
outline: none;
}
.query-btn:hover {
background: #40a9ff;
}
@media (max-width: 768px) {
.time-filter-container {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.custom-date-range {
margin-left: 0;
width: 100%;
}
}
综述: 新增品牌数据分析功能模块 - 新增连锁单位业绩排行榜页面，展示各连锁单位的销售、订单、客户等核心业务指标排行 - 新增品牌爆款商品榜页面，分析品牌商品的销量、销售额、好评率等维度表现 - 新增品牌分销全景分析页面，全面监控分销商团队、分销业绩和分销商效能数据 - 三个页面均采用响应式设计，包含丰富的数据可视化图表和排行榜展示 Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
2025-10-07 20:26:15 +00:00
.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>
综述: 优化品牌数据分析页面功能并更新菜单导航 - 修改主菜单导航链接，将"连锁单位业绩排行榜"更新为"品牌业绩排行榜"，更准确地反映页面功能定位。 - 在品牌分销全景分析页面中新增时间筛选功能模块，支持快速选择预设时间范围（今日、昨日、近7天、近30天）和自定义日期范围查询，提升数据分析的灵活性。 - 在品牌爆款商品榜页面中同样新增时间筛选功能，保持界面风格一致性，用户可根据不同时间维度查看商品销售数据。 - 删除原有的连锁单位业绩排行榜文件，替换为新的品牌业绩排行榜页面。
2025-10-08 09:22:58 +00:00
<p class="page-subtitle">全方位监控分销推广效果与分销商效能</p>
</div>
<div class="time-filter-section">
<div class="time-filter-container">
<div class="filter-label">时间范围：</div>
<div class="filter-buttons">
<button class="filter-btn active" data-range="1">近1天</button>
<button class="filter-btn" data-range="7">近7天</button>
<button class="filter-btn" data-range="30">近30天</button>
<button class="filter-btn custom-btn" data-range="custom">自定义</button>
</div>
<div class="custom-date-range" style="display: none;">
<input type="date" class="date-input" id="startDate">
<span class="date-separator">至</span>
<input type="date" class="date-input" id="endDate">
<button class="query-btn" id="customQuery">查询</button>
</div>
</div>
综述: 新增品牌数据分析功能模块 - 新增连锁单位业绩排行榜页面，展示各连锁单位的销售、订单、客户等核心业务指标排行 - 新增品牌爆款商品榜页面，分析品牌商品的销量、销售额、好评率等维度表现 - 新增品牌分销全景分析页面，全面监控分销商团队、分销业绩和分销商效能数据 - 三个页面均采用响应式设计，包含丰富的数据可视化图表和排行榜展示 Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
2025-10-07 20:26:15 +00:00
</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>
综述: 优化品牌数据分析页面功能并更新菜单导航 - 修改主菜单导航链接，将"连锁单位业绩排行榜"更新为"品牌业绩排行榜"，更准确地反映页面功能定位。 - 在品牌分销全景分析页面中新增时间筛选功能模块，支持快速选择预设时间范围（今日、昨日、近7天、近30天）和自定义日期范围查询，提升数据分析的灵活性。 - 在品牌爆款商品榜页面中同样新增时间筛选功能，保持界面风格一致性，用户可根据不同时间维度查看商品销售数据。 - 删除原有的连锁单位业绩排行榜文件，替换为新的品牌业绩排行榜页面。
2025-10-08 09:22:58 +00:00
<div class="sub-value">活跃率 71.5%</div>
综述: 新增品牌数据分析功能模块 - 新增连锁单位业绩排行榜页面，展示各连锁单位的销售、订单、客户等核心业务指标排行 - 新增品牌爆款商品榜页面，分析品牌商品的销量、销售额、好评率等维度表现 - 新增品牌分销全景分析页面，全面监控分销商团队、分销业绩和分销商效能数据 - 三个页面均采用响应式设计，包含丰富的数据可视化图表和排行榜展示 Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
2025-10-07 20:26:15 +00:00
</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>
综述: 优化品牌分销全景分析页面，移除团队裂变效果分析模块 - 在中，移除了团队裂变效果分析的图表及相关代码 - 包括删除HTML中的图表容器和JavaScript中的图表初始化代码 - 调整了响应式事件处理器，移除对已删除图表的引用
2025-10-07 20:50:50 +00:00
综述: 新增品牌数据分析功能模块 - 新增连锁单位业绩排行榜页面，展示各连锁单位的销售、订单、客户等核心业务指标排行 - 新增品牌爆款商品榜页面，分析品牌商品的销量、销售额、好评率等维度表现 - 新增品牌分销全景分析页面，全面监控分销商团队、分销业绩和分销商效能数据 - 三个页面均采用响应式设计，包含丰富的数据可视化图表和排行榜展示 Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
2025-10-07 20:26:15 +00:00
</div>
</div>
</div>
<script>
综述: 优化品牌数据分析页面功能并更新菜单导航 - 修改主菜单导航链接，将"连锁单位业绩排行榜"更新为"品牌业绩排行榜"，更准确地反映页面功能定位。 - 在品牌分销全景分析页面中新增时间筛选功能模块，支持快速选择预设时间范围（今日、昨日、近7天、近30天）和自定义日期范围查询，提升数据分析的灵活性。 - 在品牌爆款商品榜页面中同样新增时间筛选功能，保持界面风格一致性，用户可根据不同时间维度查看商品销售数据。 - 删除原有的连锁单位业绩排行榜文件，替换为新的品牌业绩排行榜页面。
2025-10-08 09:22:58 +00:00
// 时间筛选功能
const filterButtons = document.querySelectorAll('.filter-btn');
const customDateRange = document.querySelector('.custom-date-range');
const customQueryBtn = document.getElementById('customQuery');
// 切换按钮状态
filterButtons.forEach(btn => {
btn.addEventListener('click', function() {
// 移除所有按钮的active状态
filterButtons.forEach(b => b.classList.remove('active'));
// 给当前按钮添加active状态
this.classList.add('active');
const range = this.getAttribute('data-range');
if (range === 'custom') {
customDateRange.style.display = 'flex';
} else {
customDateRange.style.display = 'none';
// 这里可以根据选择的日期范围加载数据
loadDataByRange(range);
}
});
});
// 自定义日期查询
customQueryBtn.addEventListener('click', function() {
const startDate = document.getElementById('startDate').value;
const endDate = document.getElementById('endDate').value;
if (!startDate || !endDate) {
alert('请选择开始和结束日期');
return;
}
if (new Date(startDate) > new Date(endDate)) {
alert('开始日期不能晚于结束日期');
return;
}
// 这里可以根据自定义日期范围加载数据
loadCustomData(startDate, endDate);
});
// 根据预设范围加载数据
function loadDataByRange(range) {
console.log('加载近' + range + '天数据');
// 这里可以添加数据加载逻辑
// 例如：更新统计数据、图表数据等
}
// 加载自定义日期范围数据
function loadCustomData(startDate, endDate) {
console.log('加载自定义日期数据:', startDate, '至', endDate);
// 这里可以添加数据加载逻辑
}
综述: 新增品牌数据分析功能模块 - 新增连锁单位业绩排行榜页面，展示各连锁单位的销售、订单、客户等核心业务指标排行 - 新增品牌爆款商品榜页面，分析品牌商品的销量、销售额、好评率等维度表现 - 新增品牌分销全景分析页面，全面监控分销商团队、分销业绩和分销商效能数据 - 三个页面均采用响应式设计，包含丰富的数据可视化图表和排行榜展示 Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
2025-10-07 20:26:15 +00:00
// 分销商等级分布饼图
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: {
综述: 优化品牌数据分析页面功能并更新菜单导航 - 修改主菜单导航链接，将"连锁单位业绩排行榜"更新为"品牌业绩排行榜"，更准确地反映页面功能定位。 - 在品牌分销全景分析页面中新增时间筛选功能模块，支持快速选择预设时间范围（今日、昨日、近7天、近30天）和自定义日期范围查询，提升数据分析的灵活性。 - 在品牌爆款商品榜页面中同样新增时间筛选功能，保持界面风格一致性，用户可根据不同时间维度查看商品销售数据。 - 删除原有的连锁单位业绩排行榜文件，替换为新的品牌业绩排行榜页面。
2025-10-08 09:22:58 +00:00
data: ['新增分销商'],
综述: 新增品牌数据分析功能模块 - 新增连锁单位业绩排行榜页面，展示各连锁单位的销售、订单、客户等核心业务指标排行 - 新增品牌爆款商品榜页面，分析品牌商品的销量、销售额、好评率等维度表现 - 新增品牌分销全景分析页面，全面监控分销商团队、分销业绩和分销商效能数据 - 三个页面均采用响应式设计，包含丰富的数据可视化图表和排行榜展示 Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
2025-10-07 20:26:15 +00:00
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)' }
])
}
}
]
};
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);
综述: 优化品牌分销全景分析页面，移除团队裂变效果分析模块 - 在中，移除了团队裂变效果分析的图表及相关代码 - 包括删除HTML中的图表容器和JavaScript中的图表初始化代码 - 调整了响应式事件处理器，移除对已删除图表的引用
2025-10-07 20:50:50 +00:00
综述: 新增品牌数据分析功能模块 - 新增连锁单位业绩排行榜页面，展示各连锁单位的销售、订单、客户等核心业务指标排行 - 新增品牌爆款商品榜页面，分析品牌商品的销量、销售额、好评率等维度表现 - 新增品牌分销全景分析页面，全面监控分销商团队、分销业绩和分销商效能数据 - 三个页面均采用响应式设计，包含丰富的数据可视化图表和排行榜展示 Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
2025-10-07 20:26:15 +00:00
// 响应式
window.addEventListener('resize', function() {
levelChart.resize();
recruitChart.resize();
orderTypeChart.resize();
levelPerformanceChart.resize();
});
</script>
</body>
</html>