<!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>
