848 lines
30 KiB
HTML
848 lines
30 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>
|
||
|
||
|
||
</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);
|
||
|
||
|
||
// 响应式
|
||
window.addEventListener('resize', function() {
|
||
levelChart.resize();
|
||
recruitChart.resize();
|
||
orderTypeChart.resize();
|
||
levelPerformanceChart.resize();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|