778 lines
28 KiB
HTML
778 lines
28 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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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>
|