<!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>
body {
margin: 0;
padding: 0;
background-color: #0a1a35;
color: #fff;
font-family: "Microsoft YaHei", sans-serif;
}
.dashboard {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
padding: 20px;
position: relative;
overflow: hidden;
}
.chart {
width: 100%;
height: 350px;
}
.chart-container {
background: rgba(16, 42, 87, 0.7);
border-radius: 10px;
padding: 15px;
box-shadow: 0 0 20px rgba(0, 150, 255, 0.3);
}
.chart {
width: 100%;
height: 400px;
}
h2 {
color: #4fc3f7;
text-align: center;
margin-top: 0;
}
#nameList {
grid-column: span 2;
height: 100px;
overflow: hidden;
text-align: center;
font-size: 24px;
line-height: 100px;
color: #4fc3f7;
}
</style>
</head>
<body>
<div class="dashboard">
<div class="chart-container">
<h2>年龄分布柱状图</h2>
<div id="ageBarChart" class="chart"></div>
</div>
<div class="chart-container">
<h2>婚姻状态</h2>
<div id="maritalPieChart" class="chart"></div>
</div>
<div class="chart-container">
<h2>工作情况</h2>
<div id="jobBarChart" class="chart"></div>
</div>
<div class="chart-container">
<h2>子女数量</h2>
<div id="childrenLineChart" class="chart"></div>
</div>
<div class="chart-container">
<h2>学历分布</h2>
<div id="educationPieChart" class="chart"></div>
</div>
<div class="chart-container">
<h2>年龄段比例</h2>
<div id="agePieChart" class="chart"></div>
</div>
</div>
<script>
// 生成500条人员数据
const people = [];
const familyNames = ['王','李','张','刘','陈','杨','赵','黄','周','吴'];
const givenNames = ['伟','芳','娜','秀英','敏','静','丽','强','磊','军'];
const educations = ['初中','高中','专科','本科','研究生','博士研究生'];
const maritalStatuses = ['未婚','已婚','离异','丧偶'];
const jobs = ['事业编','公务员','国有企业','民营企业'];
for (let i = 1; i <= 500; i++) {
const age = Math.floor(Math.random() * 60) + 18;
const maritalStatus = maritalStatuses[Math.floor(Math.random() * maritalStatuses.length)];
people.push({
id: i,
name: familyNames[Math.floor(Math.random() * familyNames.length)] +
givenNames[Math.floor(Math.random() * givenNames.length)],
age: age,
education: educations[Math.floor(Math.random() * educations.length)],
maritalStatus: maritalStatus,
childrenCount: maritalStatus === '已婚' ? Math.floor(Math.random() * 4) : 0,
job: jobs[Math.floor(Math.random() * jobs.length)]
});
}
// 初始化图表
const ageBarChart = echarts.init(document.getElementById('ageBarChart'));
const maritalPieChart = echarts.init(document.getElementById('maritalPieChart'));
const jobBarChart = echarts.init(document.getElementById('jobBarChart'));
const childrenLineChart = echarts.init(document.getElementById('childrenLineChart'));
const educationPieChart = echarts.init(document.getElementById('educationPieChart'));
const agePieChart = echarts.init(document.getElementById('agePieChart'));
// 年龄柱状图配置
const ageRanges = ['20-30', '31-40', '41-50', '51-60', '61-70', '71-80'];
const ageCounts = ageRanges.map(range => {
const [min, max] = range.split('-').map(Number);
return people.filter(p => p.age >= min && p.age <= max).length;
});
const ageBarOption = {
tooltip: { trigger: 'axis' },
xAxis: {
type: 'category',
data: ageRanges,
axisLabel: { color: '#fff' }
},
yAxis: {
type: 'value',
axisLabel: { color: '#fff' }
},
series: [{
data: ageCounts,
type: 'bar',
itemStyle: { color: '#4fc3f7' }
}]
};
// 婚姻状态饼图配置
const maritalPieOption = {
tooltip: { trigger: 'item' },
series: [{
type: 'pie',
radius: '50%',
data: [
{ value: people.filter(p => p.maritalStatus === '已婚').length, name: '已婚' },
{ value: people.filter(p => p.maritalStatus === '未婚').length, name: '未婚' },
{ value: people.filter(p => p.maritalStatus === '离异').length, name: '离异' },
{ value: people.filter(p => p.maritalStatus === '丧偶').length, name: '丧偶' }
],
itemStyle: {
borderRadius: 5,
borderColor: '#0a1a35',
borderWidth: 2
}
}]
};
// 工作情况柱状图配置
const jobBarOption = {
tooltip: { trigger: 'axis' },
xAxis: {
type: 'category',
data: ['事业编', '公务员', '国有企业', '民营企业'],
axisLabel: { color: '#fff' }
},
yAxis: {
type: 'value',
axisLabel: { color: '#fff' }
},
series: [{
data: [
people.filter(p => p.job === '事业编').length,
people.filter(p => p.job === '公务员').length,
people.filter(p => p.job === '国有企业').length,
people.filter(p => p.job === '民营企业').length
],
type: 'bar',
itemStyle: { color: '#4fc3f7' }
}]
};
// 子女数量折线图配置
const childrenLineOption = {
tooltip: { trigger: 'axis' },
xAxis: {
type: 'category',
data: ['1个', '2个', '3个'],
axisLabel: { color: '#fff' }
},
yAxis: {
type: 'value',
axisLabel: { color: '#fff' }
},
series: [{
data: [
people.filter(p => p.childrenCount === 1).length,
people.filter(p => p.childrenCount === 2).length,
people.filter(p => p.childrenCount === 3).length
],
type: 'line',
smooth: true,
itemStyle: { color: '#4fc3f7' }
}]
};
// 学历分布饼图配置
const educationPieOption = {
tooltip: { trigger: 'item' },
series: [{
type: 'pie',
radius: '50%',
data: [
{ value: people.filter(p => p.education === '初中').length, name: '初中' },
{ value: people.filter(p => p.education === '高中').length, name: '高中' },
{ value: people.filter(p => p.education === '专科').length, name: '专科' },
{ value: people.filter(p => p.education === '本科').length, name: '本科' },
{ value: people.filter(p => p.education === '研究生').length, name: '研究生' },
{ value: people.filter(p => p.education === '博士研究生').length, name: '博士研究生' }
],
itemStyle: {
borderRadius: 5,
borderColor: '#0a1a35',
borderWidth: 2
}
}]
};
// 年龄段饼图配置
const agePieOption = {
tooltip: { trigger: 'item' },
series: [{
type: 'pie',
radius: '50%',
data: ageRanges.map((range, i) => ({
value: ageCounts[i],
name: range
})),
itemStyle: {
borderRadius: 5,
borderColor: '#0a1a35',
borderWidth: 2
}
}]
};
// 渲染所有图表
ageBarChart.setOption(ageBarOption);
maritalPieChart.setOption(maritalPieOption);
jobBarChart.setOption(jobBarOption);
childrenLineChart.setOption(childrenLineOption);
educationPieChart.setOption(educationPieOption);
agePieChart.setOption(agePieOption);
// 窗口大小变化时重置图表大小
window.addEventListener('resize', function() {
ageBarChart.resize();
maritalPieChart.resize();
jobBarChart.resize();
childrenLineChart.resize();
educationPieChart.resize();
agePieChart.resize();
});
</script>
</body>
</html>
浙公网安备 33010602011771号