<!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: 'Microsoft YaHei', sans-serif;
background-color: #0f1c3c;
color: #fff;
overflow: hidden;
}
.container {
width: 100vw;
height: 100vh;
padding: 20px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto repeat(2, 1fr);
gap: 20px;
}
.header {
grid-column: 1 / 4;
text-align: center;
padding: 10px;
background: linear-gradient(90deg, rgba(15,28,60,0.5) 0%, rgba(32,69 ,143,0.5) 50%, rgba(15,28,60,0.5) 100%);
border: 1px solid #20458f;
border-radius: 5px;
}
.header h1 {
font-size: 2.5rem;
background: linear-gradient(90deg, #4d9aff, #a2c6ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 10px rgba(77, 154, 255, 0.5);
}
.card {
background-color: rgba(16, 31, 63, 0.7);
border: 1px solid #20458f;
border-radius: 5px;
padding: 15px;
box-shadow: 0 0 10px rgba(32, 69, 143, 0.5);
display: flex;
flex-direction: column;
}
.card-header {
margin-bottom: 15px;
font-size: 1.2rem;
color: #4d9aff;
display: flex;
justify-content: space-between;
align-items: center;
}
.card-content {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.chart-container {
width: 100%;
height: 100%;
}
.stats-container {
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
}
.stat-item {
text-align: center;
}
.stat-value {
font-size: 2.5rem;
font-weight: bold;
color: #4d9aff;
margin-bottom: 5px;
}
.stat-label {
color: #a2c6ff;
}
.refresh-btn {
background: transparent;
border: 1px solid #4d9aff;
color: #4d9aff;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
transition: all 0.3s;
}
.refresh-btn:hover {
background-color: rgba(77, 154, 255, 0.2);
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 1s ease-in-out;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>企业运营数据可视化大屏</h1>
</div>
<div class="card">
<div class="card-header">
<span>销售趋势</span>
<button class="refresh-btn" onclick="refreshData('salesChart')"> 刷新</button>
</div>
<div class="card-content">
<div id="salesChart" class="chart-container"></div>
</div>
</div>
<div class="card">
<div class="card-header">
<span>用户分布</span>
<button class="refresh-btn" onclick="refreshData('userChart')"> 刷新</button>
</div>
<div class="card-content">
<div id="userChart" class="chart-container"></div>
</div>
</div>
<div class="card">
<div class="card-header">
<span>实时指标</span>
<button class="refresh-btn" onclick="refreshData('stats')">刷新< /button>
</div>
<div class="card-content">
<div class="stats-container" id="stats">
<div class="stat-item">
<div class="stat-value" id="totalUsers">0</div>
<div class="stat-label">总用户数</div>
</div>
<div class="stat-item">
<div class="stat-value" id="todaySales">0</div>
<div class="stat-label">今日销售额(万)</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<span>产品占比</span>
<button class="refresh-btn" onclick="refreshData('productChart') ">刷新</button>
</div>
<div class="card-content">
<div id="productChart" class="chart-container"></div>
</div>
</div>
<div class="card">
<div class="card-header">
<span>区域销售</span>
<button class="refresh-btn" onclick="refreshData('regionChart')" >刷新</button>
</div>
<div class="card-content">
<div id="regionChart" class="chart-container"></div>
</div>
</div>
<div class="card">
<div class="card-header">
<span>月度完成率</span>
<button class="refresh-btn" onclick="refreshData('completionChar t')">刷新</button>
</div>
<div class="card-content">
<div id="completionChart" class="chart-container"></div>
</div>
</div>
</div>
<script>
// 初始化所有图表
let charts = {};
// 销售趋势图
function initSalesChart() {
const chartDom = document.getElementById('salesChart');
charts.salesChart = echarts.init(chartDom);
const option = {
tooltip: { trigger: 'axis' },
grid: { top: 10, right: 30, bottom: 30, left: 50 },
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月 ', '9月', '10月', '11月', '12月'],
axisLine: { lineStyle: { color: '#4d9aff' } },
axisLabel: { color: '#a2c6ff' }
},
yAxis: {
type: 'value',
axisLine: { show: true, lineStyle: { color: '#4d9aff' } },
axisLabel: { color: '#a2c6ff' },
splitLine: { lineStyle: { color: 'rgba(77, 154, 255, 0.2)' } }
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130, 180, 210, 240, 190, 160],
type: 'line',
smooth: true,
lineStyle: { color: '#4d9aff', width: 3 },
itemStyle: { color: '#4d9aff' },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(77, 154, 255, 0.6)' },
{ offset: 1, color: 'rgba(77, 154, 255, 0.1)' }
])
}
}]
};
charts.salesChart.setOption(option);
}
// 用户分布图
function initUserChart() {
const chartDom = document.getElementById('userChart');
charts.userChart = echarts.init(chartDom);
const option = {
tooltip: { trigger: 'item' },
legend: {
orient: 'vertical',
right: 10,
top: 'center',
textStyle: { color: '#a2c6ff' }
},
series: [{
name: '用户分布',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderColor: '#0f1c3c',
borderWidth: 2
},
label: { show: false },
emphasis: {
label: { show: true, fontSize: '14', fontWeight: 'bold' }
},
labelLine: { show: false },
data: [
{ value: 1048, name: '华北', itemStyle: { color: '#5470c 6' } },
{ value: 735, name: '华东', itemStyle: { color: '#91cc75 ' } },
{ value: 580, name: '华南', itemStyle: { color: '#fac858 ' } },
{ value: 484, name: '西南', itemStyle: { color: '#ee6666 ' } },
{ value: 300, name: '西北', itemStyle: { color: '#73c0de ' } }
]
}]
};
charts.userChart.setOption(option);
}
// 产品占比图
function initProductChart() {
const chartDom = document.getElementById('productChart');
charts.productChart = echarts.init(chartDom);
const option = {
tooltip: { trigger: 'item' },
series: [{
name: '产品占比',
type: 'pie',
radius: '70%',
center: ['50%', '50%'],
data: [
{ value: 1048, name: '产品A' },
{ value: 735, name: '产品B' },
{ value: 580, name: '产品C' },
{ value: 484, name: '产品D' },
{ value: 300, name: '产品E' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
itemStyle: {
color: function(params) {
const colorList = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'];
return colorList[params.dataIndex];
}
}
}]
};
charts.productChart.setOption(option);
}
// 区域销售图
function initRegionChart() {
const chartDom = document.getElementById('regionChart');
charts.regionChart = echarts.init(chartDom);
const option = {
tooltip: { trigger: 'axis' },
grid: { top: 10, right: 30, bottom: 30, left: 50 },
xAxis: {
type: 'category',
data: ['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉 ', '西安'],
axisLine: { lineStyle: { color: '#4d9aff' } },
axisLabel: { color: '#a2c6ff', interval: 0, rotate: 30 }
},
yAxis: {
type: 'value',
axisLine: { show: true, lineStyle: { color: '#4d9aff' } },
axisLabel: { color: '#a2c6ff' },
splitLine: { lineStyle: { color: 'rgba(77, 154, 255, 0.2)' } }
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130, 180],
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#4d9aff' },
{ offset: 1, color: '#20458f' }
])
}
}]
};
charts.regionChart.setOption(option);
}
// 月度完成率图
function initCompletionChart() {
const chartDom = document.getElementById('completionChart');
charts.completionChart = echarts.init(chartDom);
const option = {
tooltip: { trigger: 'axis' },
radar: {
indicator: [
{ name: '销售', max: 100 },
{ name: '市场', max: 100 },
{ name: '技术', max: 100 },
{ name: '客服', max: 100 },
{ name: '研发', max: 100 },
{ name: '后勤', max: 100 }
],
splitArea: {
areaStyle: {
color: ['rgba(77, 154, 255, 0.1)', 'rgba(77, 154, 25 5, 0.05)']
}
},
axisLine: { lineStyle: { color: 'rgba(77, 154, 255, 0.5)' } },
splitLine: { lineStyle: { color: 'rgba(77, 154, 255, 0.5)' } },
name: { textStyle: { color: '#a2c6ff' } }
},
series: [{
name: '完成率',
type: 'radar',
data: [{
value: [85, 90, 75, 95, 80, 70],
name: '月度完成率',
areaStyle: {
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
{ color: 'rgba(77, 154, 255, 0.5)', offset: 0 },
{ color: 'rgba(77, 154, 255, 0.1)', offset: 1 }
])
},
lineStyle: { color: '#4d9aff' },
itemStyle: { color: '#4d9aff' }
}]
}]
};
charts.completionChart.setOption(option);
}
// 更新统计数据
function updateStats() {
// 模拟从PHP后端获取数据
const totalUsers = Math.floor(Math.random() * 10000) + 50000;
const todaySales = (Math.random() * 100).toFixed(2);
document.getElementById('totalUsers').textContent = totalUsers.toLoc aleString();
document.getElementById('todaySales').textContent = todaySales;
// 添加动画效果
document.getElementById('totalUsers').classList.add('fade-in');
document.getElementById('todaySales').classList.add('fade-in');
setTimeout(() => {
document.getElementById('totalUsers').classList.remove('fade-in' );
document.getElementById('todaySales').classList.remove('fade-in' );
}, 1000);
}
// 刷新数据
function refreshData(chartType) {
if (chartType === 'stats') {
updateStats();
} else if (charts[chartType]) {
// 在实际应用中，这里应该从PHP后端获取新数据
// 这里仅做模拟刷新
charts[chartType].showLoading();
setTimeout(() => {
charts[chartType].hideLoading();
charts[chartType].resize();
}, 500);
}
}
// 初始化所有图表
function initAllCharts() {
initSalesChart();
initUserChart();
initProductChart();
initRegionChart();
initCompletionChart();
updateStats();
// 窗口大小改变时，重新调整图表大小
window.addEventListener('resize', function() {
Object.values(charts).forEach(chart => {
chart.resize();
});
});
}
// 页面加载完成后初始化
window.onload = initAllCharts;
</script>
</body>
</html>
