<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>霸王茶饮运营分析看板</title>
<!-- 资源预加载 -->
<link rel="preload" href="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js" as="script">
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" as="style">
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--gold-primary: #c9a66b;
--gold-dark: #8c6e3d;
--gold-light: #e8d9b5;
--gold-accent: #d4b483;
--bg-color: #faf7f0;
--card-color: #fffdf9;
--text-dark: #5a4a3a;
--text-light: #a08c70;
--border-color: #e8e1d5;
--sapphire-blue: #1E90FF;
}
/* 深色主题变量 */
.dark-theme {
--bg-color: #1a1a1a;
--card-color: #2d2d2d;
--text-dark: #e0e0e0;
--text-light: #a0a0a0;
--border-color: #3d3d3d;
}
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background: linear-gradient(135deg, rgba(255,253,249,0.98), rgba(248,245,238,0.98));
box-shadow: 0 2px 15px rgba(140, 110, 61, 0.1);
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30px;
z-index: 1000;
backdrop-filter: blur(5px);
transition: all 0.3s;
}
.dark-theme .navbar {
background: linear-gradient(135deg, rgba(45,45,45,0.98), rgba(40,40,40,0.98));
border-bottom-color: #444;
}
.navbar-brand {
display: flex;
align-items: center;
font-size: 20px;
font-weight: 600;
color: var(--gold-dark);
text-decoration: none;
}
.navbar-brand i {
margin-right: 10px;
color: var(--gold-primary);
}
.navbar-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.navbar-item {
position: relative;
margin-left: 25px;
}
.navbar-link {
color: var(--text-dark);
text-decoration: none;
font-size: 15px;
font-weight: 500;
transition: all 0.3s;
display: flex;
align-items: center;
}
.navbar-link i {
margin-right: 8px;
font-size: 14px;
color: var(--gold-dark);
}
.navbar-link:hover {
color: var(--gold-dark);
}
.navbar-link.active {
color: var(--gold-dark);
font-weight: 600;
}
.navbar-link.active::after {
content: "";
position: absolute;
bottom: -8px;
left: 0;
right: 0;
height: 2px;
background: var(--gold-primary);
}
.navbar-actions {
display: flex;
align-items: center;
}
.navbar-button {
background: rgba(201, 166, 107, 0.15);
border: 1px solid var(--border-color);
padding: 6px 15px;
border-radius: 20px;
color: var(--gold-dark);
cursor: pointer;
font-size: 13px;
transition: all 0.3s;
display: flex;
align-items: center;
margin-left: 15px;
}
.navbar-button i {
margin-right: 6px;
font-size: 12px;
}
.navbar-button:hover {
background: rgba(201, 166, 107, 0.25);
}
.navbar-button.primary {
background: var(--gold-primary);
color: white;
border-color: var(--gold-dark);
}
.navbar-button.primary:hover {
background: var(--gold-dark);
}
body {
margin: 0;
padding: 90px 20px 20px;
background-color: var(--bg-color);
font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
color: var(--text-dark);
background-image:
linear-gradient(45deg, rgba(201, 166, 107, 0.03) 25%, transparent 25%),
linear-gradient(-45deg, rgba(201, 166, 107, 0.03) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(201, 166, 107, 0.03) 75%),
linear-gradient(-45deg, transparent 75%, rgba(201, 166, 107, 0.03) 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
transition: background-color 0.3s, color 0.3s;
}
.dashboard {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 20px;
max-width: 1400px;
margin: 0 auto;
}
.header {
grid-column: 1 / -1;
text-align: center;
margin-bottom: 10px;
padding: 25px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(255,253,249,0.9), rgba(248,245,238,0.9));
box-shadow: 0 4px 15px rgba(140, 110, 61, 0.08);
border: 1px solid var(--border-color);
position: relative;
overflow: hidden;
}
.header::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--gold-primary), var(--gold-dark));
}
.kpi-container {
grid-column: span 12;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.chart-container {
background: var(--card-color);
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(140, 110, 61, 0.08);
border: 1px solid var(--border-color);
position: relative;
overflow: hidden;
}
.chart-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--gold-primary), var(--gold-dark));
}
.span-6 { grid-column: span 6; }
.span-8 { grid-column: span 8; }
.span-4 { grid-column: span 4; }
.span-12 { grid-column: span 12; }
.kpi-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
min-height: 150px;
background: linear-gradient(135deg, rgba(255,253,249,0.9), rgba(248,245,238,0.9));
border-radius: 10px;
position: relative;
overflow: hidden;
border: 1px solid var(--border-color);
box-shadow: 0 2px 10px rgba(140, 110, 61, 0.05);
transition: all 0.3s ease;
}
.kpi-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(140, 110, 61, 0.15);
}
.kpi-card::after {
content: "";
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 200%;
background: radial-gradient(circle, rgba(201,166,107,0.08) 0%, rgba(201,166,107,0) 70%);
transform: rotate(30deg);
}
.kpi-icon {
font-size: 28px;
margin-bottom: 10px;
opacity: 0.8;
position: relative;
z-index: 1;
color: var(--gold-dark);
}
.kpi-value {
font-size: 32px;
font-weight: bold;
color: var(--gold-dark);
margin-bottom: 5px;
position: relative;
z-index: 1;
text-shadow: 0 1px 2px rgba(140, 110, 61, 0.1);
}
.kpi-title {
font-size: 16px;
color: var(--text-dark);
position: relative;
z-index: 1;
}
.kpi-change {
font-size: 14px;
margin-top: 8px;
display: flex;
align-items: center;
position: relative;
z-index: 1;
}
.kpi-change.positive {
color: #52c41a;
}
.kpi-change.negative {
color: #f5222d;
}
h1 {
color: var(--gold-dark);
margin: 0;
font-size: 28px;
font-weight: 600;
letter-spacing: 1px;
}
h2 {
color: var(--gold-dark);
margin: 0 0 15px 0;
font-size: 18px;
font-weight: 500;
display: flex;
align-items: center;
}
.title-icon {
margin-right: 10px;
font-size: 20px;
color: var(--gold-dark);
}
.subtitle {
color: var(--text-light);
font-size: 14px;
margin-top: 5px;
}
.chart-title {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px dashed var(--border-color);
}
.chart-actions {
display: flex;
gap: 10px;
}
.chart-actions button {
display: flex;
align-items: center;
gap: 5px;
background: rgba(201, 166, 107, 0.15);
border: 1px solid var(--border-color);
padding: 4px 12px;
border-radius: 16px;
color: var(--gold-dark);
cursor: pointer;
font-size: 12px;
transition: all 0.3s;
}
.chart-actions button.active {
background: var(--gold-primary);
color: white;
border-color: var(--gold-dark);
}
.chart-actions button:hover:not(.active) {
background: rgba(201, 166, 107, 0.25);
}
.chart-actions button i {
font-size: 12px;
}
.gold-decoration {
position: absolute;
width: 30px;
height: 30px;
opacity: 0.3;
}
.top-left {
top: 10px;
left: 10px;
border-top: 2px solid var(--gold-primary);
border-left: 2px solid var(--gold-primary);
}
.top-right {
top: 10px;
right: 10px;
border-top: 2px solid var(--gold-primary);
border-right: 2px solid var(--gold-primary);
}
.bottom-left {
bottom: 10px;
left: 10px;
border-bottom: 2px solid var(--gold-primary);
border-left: 2px solid var(--gold-primary);
}
.bottom-right {
bottom: 10px;
right: 10px;
border-bottom: 2px solid var(--gold-primary);
border-right: 2px solid var(--gold-primary);
}
@media (max-width: 1200px) {
.dashboard {
grid-template-columns: repeat(2, 1fr);
}
.span-4, .span-6, .span-8 {
grid-column: span 2;
}
}
@media (max-width: 768px) {
.dashboard {
grid-template-columns: 1fr;
}
.span-4, .span-6, .span-8, .span-12 {
grid-column: span 1;
}
.kpi-container {
grid-template-columns: 1fr;
gap: 12px;
}
.navbar {
padding: 0 15px;
}
.navbar-menu {
display: none;
}
.navbar-brand {
font-size: 18px;
}
.navbar-button {
padding: 5px 10px;
font-size: 12px;
margin-left: 8px;
}
}
</style>
</head>
<body>
<!-- 修改后的导航条部分 -->
<nav class="navbar">
<a href="#" class="navbar-brand">
<i class="fas fa-crown"></i>霸王茶饮
</a>
<ul class="navbar-menu">
<!-- 数据看板 -->
<li class="navbar-item">
<a href="#" class="navbar-link active">
<i class="fas fa-chart-pie"></i>数据看板
</a>
<div class="nav-table-container">
<table class="nav-table">
<thead>
<tr>
<th>指标</th>
<th>本月</th>
<th>环比</th>
</tr>
</thead>
<tbody>
<tr>
<td>总营收</td>
<td>¥1,258,900</td>
<td>↑12.5%</td>
</tr>
<tr>
<td>订单量</td>
<td>3,892单</td>
<td>↑8.3%</td>
</tr>
</tbody>
</table>
</div>
</li>
<!-- 门店管理 -->
<li class="navbar-item">
<a href="#" class="navbar-link">
<i class="fas fa-store"></i>门店管理
</a>
<div class="nav-table-container">
<table class="nav-table">
<thead>
<tr>
<th>区域</th>
<th>门店数</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>朝阳区</td>
<td>15家</td>
<td>正常</td>
</tr>
<tr>
<td>海淀区</td>
<td>8家</td>
<td>扩建中</td>
</tr>
</tbody>
</table>
</div>
</li>
<!-- 其他导航项类似结构... -->
</ul>
</nav>
<style>
/* 新增表格样式 */
.nav-table-container {
position: absolute;
top: 60px;
left: 0;
background: white;
border-radius: 8px;
box-shadow: 0 2px 15px rgba(140, 110, 61, 0.1);
padding: 15px;
min-width: 240px;
z-index: 100;
display: none;
}
.navbar-item:hover .nav-table-container {
display: block;
}
.nav-table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
.nav-table th {
background: var(--gold-primary);
color: white;
padding: 8px;
font-size: 12px;
}
.nav-table td {
padding: 10px;
border-bottom: 1px solid var(--border-color);
color: var(--text-dark);
}
.nav-table tr:hover {
background: rgba(201, 166, 107, 0.1);
}
@media (max-width: 768px) {
.nav-table-container {
position: static;
box-shadow: none;
border-radius: 0;
}
}
</style>
<div class="navbar-actions">
<button class="navbar-button" id="theme-toggle">
<i class="fas fa-moon"></i> 主题
</button>
<button class="navbar-button">
<i class="fas fa-bell"></i>消息
</button>
<button class="navbar-button primary">
<i class="fas fa-download"></i>导出报表
</button>
</div>
</nav>
<div class="dashboard">
<div class="header">
<div class="gold-decoration top-left"></div>
<div class="gold-decoration top-right"></div>
<div class="gold-decoration bottom-left"></div>
<div class="gold-decoration bottom-right"></div>
<h1><i class="fas fa-chart-pie title-icon"></i>霸王茶饮运营分析看板</h1>
<div class="subtitle">数据更新至2023年6月 | 昨日数据已刷新</div>
</div>
<!-- KPI指标卡 -->
<div class="kpi-container span-12">
<div class="chart-container kpi-card">
<div class="gold-decoration top-left"></div>
<div class="gold-decoration bottom-right"></div>
<div class="kpi-icon"><i class="fas fa-coins"></i></div>
<div class="kpi-value">¥1,258,900</div>
<div class="kpi-title">本月总营收</div>
<div class="kpi-change positive">
<span>↑ 12.5%</span> 环比上月
</div>
</div>
<div class="chart-container kpi-card">
<div class="gold-decoration top-left"></div>
<div class="gold-decoration bottom-right"></div>
<div class="kpi-icon"><i class="fas fa-shopping-cart"></i></div>
<div class="kpi-value">3,892</div>
<div class="kpi-title">本月订单量</div>
<div class="kpi-change positive">
<span>↑ 8.3%</span> 环比上月
</div>
</div>
<div class="chart-container kpi-card">
<div class="gold-decoration top-left"></div>
<div class="gold-decoration bottom-right"></div>
<div class="kpi-icon"><i class="fas fa-user-friends"></i></div>
<div class="kpi-value">¥323.5</div>
<div class="kpi-title">客单价</div>
<div class="kpi-change positive">
<span>↑ 3.9%</span> 环比上月
</div>
</div>
</div>
<!-- 主要图表 -->
<div class="chart-container span-8" id="revenue-trend" style="height:350px">
<div class="gold-decoration top-left"></div>
<div class="gold-decoration bottom-right"></div>
<div class="chart-title">
<h2><i class="fas fa-chart-line title-icon"></i>近6个月营收趋势</h2>
<div class="chart-actions">
<button><i class="fas fa-calendar-alt"></i> 月视图</button>
<button><i class="fas fa-calendar"></i> 季度视图</button>
</div>
</div>
</div>
<div class="chart-container span-4" id="product-mix" style="height:350px">
<div class="gold-decoration top-left"></div>
<div class="gold-decoration bottom-right"></div>
<div class="chart-title">
<h2><i class="fas fa-coffee title-icon"></i>产品销量占比</h2>
<div class="chart-actions">
<button><i class="fas fa-list"></i> 品类</button>
<button><i class="fas fa-layer-group"></i> 系列</button>
</div>
</div>
</div>
<div class="chart-container span-6" id="hourly-sales" style="height:350px">
<div class="gold-decoration top-left"></div>
<div class="gold-decoration bottom-right"></div>
<div class="chart-title">
<h2><i class="fas fa-clock title-icon"></i>每日销售高峰时段</h2>
<div class="chart-actions">
<button><i class="fas fa-briefcase"></i> 工作日</button>
<button><i class="fas fa-umbrella-beach"></i> 周末</button>
</div>
</div>
</div>
<div class="chart-container span-6" id="regional-sales" style="height:350px">
<div class="gold-decoration top-left"></div>
<div class="gold-decoration bottom-right"></div>
<div class="chart-title">
<h2><i class="fas fa-map-marked-alt title-icon"></i>各区域门店销售对比</h2>
<div class="chart-actions">
<button><i class="fas fa-globe-asia"></i> 按区域</button>
<button><i class="fas fa-store"></i> 按门店</button>
</div>
</div>
</div>
<div class="chart-container span-12" id="customer-analysis" style="height:400px">
<div class="gold-decoration top-left"></div>
<div class="gold-decoration bottom-right"></div>
<div class="chart-title">
<h2><i class="fas fa-users title-icon"></i>客户消费分析</h2>
<div class="chart-actions">
<button><i class="fas fa-user-plus"></i> 新客户</button>
<button><i class="fas fa-user-check"></i> 老客户</button>
<button><i class="fas fa-redo"></i> 复购率</button>
</div>
</div>
</div>
<div class="chart-container span-6" id="popular-products" style="height:350px">
<div class="gold-decoration top-left"></div>
<div class="gold-decoration bottom-right"></div>
<div class="chart-title">
<h2><i class="fas fa-fire-alt title-icon"></i>热销产品TOP5</h2>
<div class="chart-actions">
<button><i class="fas fa-calendar-alt"></i> 本月</button>
<button><i class="fas fa-calendar"></i> 本季</button>
</div>
</div>
</div>
<div class="chart-container span-6" id="member-analysis" style="height:350px">
<div class="gold-decoration top-left"></div>
<div class="gold-decoration bottom-right"></div>
<div class="chart-title">
<h2><i class="fas fa-crown title-icon"></i>会员消费分析</h2>
<div class="chart-actions">
<button><i class="fas fa-history"></i> 消费频次</button>
<button><i class="fas fa-money-bill-wave"></i> 消费金额</button>
</div>
</div>
</div>
</div>
<script>
// 公共工具提示配置
const commonTooltip = {
trigger: 'axis',
backgroundColor: 'rgba(255,253,249,0.95)',
borderColor: 'var(--border-color)',
textStyle: { color: 'var(--text-dark)' },
extraCssText: 'box-shadow: 0 2px 10px rgba(140, 110, 61, 0.1);'
};
// 主题切换功能
function toggleTheme() {
const body = document.body;
const isDark = body.classList.contains('dark-theme');
const themeIcon = document.querySelector('#theme-toggle i');
if (isDark) {
body.classList.remove('dark-theme');
themeIcon.classList.replace('fa-sun', 'fa-moon');
localStorage.setItem('theme', 'light');
} else {
body.classList.add('dark-theme');
themeIcon.classList.replace('fa-moon', 'fa-sun');
localStorage.setItem('theme', 'dark');
}
// 重新渲染图表
refreshCharts();
}
// 刷新图表函数
function refreshCharts() {
const chartIds = [
'revenue-trend', 'product-mix', 'hourly-sales',
'regional-sales', 'customer-analysis',
'popular-products', 'member-analysis'
];
chartIds.forEach(id => {
const chart = echarts.getInstanceByDom(document.getElementById(id));
if (chart) {
chart.dispose();
initChart(id);
}
});
}
// 懒加载逻辑
function initLazyLoad() {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const container = entry.target;
if (!container.dataset.loaded) {
initChart(container.id);
container.dataset.loaded = true;
observer.unobserve(container);
}
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.chart-container').forEach(container => {
observer.observe(container);
});
}
// 初始化图表（保留所有原始数据）
function initChart(chartId) {
const chart = echarts.init(document.getElementById(chartId));
let option;
switch(chartId) {
case 'revenue-trend':
option = {
tooltip: commonTooltip,
grid: {
top: 60,
right: 30,
bottom: 30,
left: 50
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
axisLine: {
lineStyle: { color: 'rgba(140, 110, 61, 0.3)' }
},
axisLabel: {
color: 'var(--text-dark)'
}
},
yAxis: {
type: 'value',
name: '金额(万元)',
axisLine: {
lineStyle: { color: 'rgba(140, 110, 61, 0.3)' }
},
splitLine: {
lineStyle: { color: 'rgba(140, 110, 61, 0.1)' }
},
axisLabel: {
color: 'var(--text-dark)'
},
nameTextStyle: {
color: 'var(--text-dark)'
}
},
series: [{
name: '营收',
data: [98.5, 105.2, 112.8, 118.6, 124.3, 125.9],
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 8,
lineStyle: {
width: 4,
color: 'var(--gold-primary)'
},
itemStyle: {
color: 'var(--gold-primary)',
borderColor: '#fff',
borderWidth: 2
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(201, 166, 107, 0.3)' },
{ offset: 1, color: 'rgba(201, 166, 107, 0.05)' }
])
},
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
],
symbolSize: 50,
label: {
color: '#fff',
backgroundColor: 'var(--sapphire-blue)',
padding: [3, 8],
borderRadius: 10
},
itemStyle: {
color: 'var(--sapphire-blue)'
}
}
}]
};
break;
case 'product-mix':
option = {
tooltip: {
...commonTooltip,
formatter: '{b}: {c}单 ({d}%)'
},
legend: {
orient: 'vertical',
right: 10,
top: 'center',
textStyle: {
color: 'var(--text-dark)',
fontWeight: 'normal'
}
},
series: [{
type: 'pie',
radius: ['50%', '75%'],
center: ['40%', '50%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 6,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center',
color: 'var(--text-dark)'
},
emphasis: {
label: {
show: true,
color: 'var(--text-dark)'
},
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.2)'
}
},
labelLine: { show: false },
data: [
{ value: 1258, name: '经典奶茶系列', itemStyle: { color: '#c9a66b' } },
{ value: 892, name: '果茶系列', itemStyle: { color: '#a3b86c' } },
{ value: 756, name: '芝士茶系列', itemStyle: { color: '#d4b483' } },
{ value: 532, name: '限定季节款', itemStyle: { color: '#b3873e' } },
{ value: 354, name: '其他', itemStyle: { color: '#e8d9b5' } }
]
}]
};
break;
case 'hourly-sales':
option = {
tooltip: {
...commonTooltip,
formatter: '时段: {b0}<br/>订单量: <b>{c0}单</b>'
},
grid: {
top: 60,
right: 20,
bottom: 30,
left: 50
},
xAxis: {
type: 'category',
data: ['9-11', '11-13', '13-15', '15-17', '17-19', '19-21'],
axisLine: {
lineStyle: { color: 'rgba(140, 110, 61, 0.3)' }
},
axisLabel: {
color: 'var(--text-dark)'
}
},
yAxis: {
type: 'value',
name: '订单量',
axisLine: {
lineStyle: { color: 'rgba(140, 110, 61, 0.3)' }
},
splitLine: {
lineStyle: { color: 'rgba(140, 110, 61, 0.1)' }
},
axisLabel: {
color: 'var(--text-dark)'
},
nameTextStyle: {
color: 'var(--text-dark)'
}
},
series: [{
name: '订单量',
data: [125, 342, 198, 156, 287, 210],
type: 'bar',
barWidth: '60%',
itemStyle: {
color: function(params) {
const colorList = [
'#e8d9b5', '#d4b483', '#c9a66b',
'#b3873e', '#8c6e3d', '#6e5a3d'
];
return colorList[params.dataIndex];
},
borderRadius: [6, 6, 0, 0],
opacity: 0.9
},
label: {
show: true,
position: 'top',
formatter: '{c}',
color: 'var(--text-dark)'
}
}]
};
break;
case 'regional-sales':
option = {
tooltip: {
...commonTooltip,
formatter: '区域: {b0}<br/>销售额: <b>{c0}万元</b>'
},
grid: {
top: 60,
right: 20,
bottom: 30,
left: 50
},
xAxis: {
type: 'category',
data: ['朝阳区', '海淀区', '东城区', '西城区', '丰台区', '通州区'],
axisLabel: {
interval: 0,
rotate: 30,
color: 'var(--text-dark)'
},
axisLine: {
lineStyle: { color: 'rgba(140, 110, 61, 0.3)' }
}
},
yAxis: {
type: 'value',
name: '销售额(万元)',
axisLine: {
lineStyle: { color: 'rgba(140, 110, 61, 0.3)' }
},
splitLine: {
lineStyle: { color: 'rgba(140, 110, 61, 0.1)' }
},
axisLabel: {
color: 'var(--text-dark)'
},
nameTextStyle: {
color: 'var(--text-dark)'
}
},
series: [{
name: '销售额',
data: [28.5, 25.3, 22.1, 19.8, 18.2, 12.0],
type: 'bar',
barWidth: '60%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#f0e5d1' },
{ offset: 0.5, color: '#d4b483' },
{ offset: 1, color: '#8c6e3d' }
]),
borderRadius: [6, 6, 0, 0],
opacity: 0.9
},
label: {
show: true,
position: 'top',
formatter: '{c}',
color: 'var(--text-dark)'
}
}]
};
break;
case 'customer-analysis':
option = {
tooltip: {
...commonTooltip,
formatter: function(params) {
let result = params[0].axisValue + '<br/>';
params.forEach(param => {
result += `${param.seriesName}: <b>${param.value}人</b><br/>`;
});
return result;
}
},
legend: {
data: ['新客户', '老客户'],
right: 20,
top: 10,
textStyle: {
color: 'var(--text-dark)',
fontWeight: 'normal'
}
},
grid: {
top: 80,
right: 30,
bottom: 30,
left: 50
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
axisLine: {
lineStyle: { color: 'rgba(140, 110, 61, 0.3)' }
},
axisLabel: {
color: 'var(--text-dark)'
}
},
yAxis: {
type: 'value',
name: '客户数',
axisLine: {
lineStyle: { color: 'rgba(140, 110, 61, 0.3)' }
},
splitLine: {
lineStyle: { color: 'rgba(140, 110, 61, 0.1)' }
},
axisLabel: {
color: 'var(--text-dark)'
},
nameTextStyle: {
color: 'var(--text-dark)'
}
},
series: [
{
name: '新客户',
data: [1250, 1180, 1320, 1420, 1380, 1450],
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 8,
lineStyle: {
width: 3,
color: '#c9a66b'
},
itemStyle: {
color: '#c9a66b',
borderColor: '#fff',
borderWidth: 2
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(201, 166, 107, 0.3)' },
{ offset: 1, color: 'rgba(201, 166, 107, 0.05)' }
])
}
},
{
name: '老客户',
data: [850, 920, 1050, 1120, 1250, 1320],
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 8,
lineStyle: {
width: 3,
color: '#8c6e3d'
},
itemStyle: {
color: '#8c6e3d',
borderColor: '#fff',
borderWidth: 2
}
}
]
};
break;
case 'popular-products':
option = {
tooltip: {
...commonTooltip,
axisPointer: { type: 'shadow' },
formatter: '产品: {b0}<br/>销量: <b>{c0}单</b>'
},
grid: {
top: 60,
right: 40,
bottom: 30,
left: 80
},
xAxis: {
type: 'value',
axisLine: {
lineStyle: { color: 'rgba(140, 110, 61, 0.3)' }
},
splitLine: {
lineStyle: { color: 'rgba(140, 110, 61, 0.1)' }
},
axisLabel: {
color: 'var(--text-dark)'
}
},
yAxis: {
type: 'category',
data: ['霸王芝士奶茶', '四季春水果茶', '珍珠烤奶', '桂花乌龙', '杨枝甘露'],
axisLine: {
lineStyle: { color: 'rgba(140, 110, 61, 0.3)' }
},
axisLabel: {
color: 'var(--text-dark)'
}
},
series: [{
name: '销量',
type: 'bar',
data: [1258, 982, 876, 754, 632],
itemStyle: {
color: function(params) {
const colorList = [
'#c9a66b', '#a3b86c', '#d4b483',
'#b3873e', '#8c6e3d'
];
return colorList[params.dataIndex];
},
borderRadius: [0, 6, 6, 0],
opacity: 0.9
},
label: {
show: true,
position: 'right',
formatter: '{c}单',
color: 'var(--text-dark)'
}
}]
};
break;
case 'member-analysis':
option = {
tooltip: {
...commonTooltip,
trigger: 'item',
formatter: '{a} <br/>{b}: {c}%'
},
series: [{
name: '会员消费占比',
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '50%'],
roseType: 'radius',
itemStyle: {
borderRadius: 6,
borderColor: '#fff',
borderWidth: 2
},
label: {
color: 'var(--text-dark)'
},
emphasis: {
label: {
show: true,
fontSize: '18',
fontWeight: 'bold'
}
},
data: [
{ value: 38, name: '黄金会员', itemStyle: { color: '#c9a66b' } },
{ value: 28, name: '白银会员', itemStyle: { color: '#d4b483' } },
{ value: 20, name: '普通会员', itemStyle: { color: '#e8d9b5' } },
{ value: 14, name: '非会员', itemStyle: { color: '#f0e5d1' } }
]
}]
};
break;
}
chart.setOption(option);
document.getElementById(chartId).classList.add('loaded');
}
// 初始化
document.addEventListener('DOMContentLoaded', function() {
// 初始化主题
if (localStorage.getItem('theme') === 'dark') {
document.body.classList.add('dark-theme');
document.querySelector('#theme-toggle i').classList.replace('fa-moon', 'fa-sun');
}
// 初始化懒加载
initLazyLoad();
// 主题切换事件
document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
// 防抖函数
function debounce(func, wait) {
let timeout;
return function() {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args);
}, wait);
};
}
// 窗口大小调整
const debouncedResize = debounce(function() {
echarts.getInstanceByDom(document.getElementById('revenue-trend'))?.resize();
echarts.getInstanceByDom(document.getElementById('product-mix'))?.resize();
echarts.getInstanceByDom(document.getElementById('hourly-sales'))?.resize();
echarts.getInstanceByDom(document.getElementById('regional-sales'))?.resize();
echarts.getInstanceByDom(document.getElementById('customer-analysis'))?.resize();
echarts.getInstanceByDom(document.getElementById('popular-products'))?.resize();
echarts.getInstanceByDom(document.getElementById('member-analysis'))?.resize();
}, 300);
window.addEventListener('resize', debouncedResize);
});
</script>
</body>
</html>
酷炫的数据看板
最新推荐文章于 2025-10-24 19:14:56 发布
扫一扫
281
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
