以下的 index.html 、 script.js 和 styles.css 文件，实现一个具有黑科技风格、自动刷新的能源管理系统实时监控看板。
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><!-- 引入 ECharts 文件 --><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script><link rel="stylesheet" href="styles.css"><link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body><header><h1>工厂能源管理系统实时监控看板</h1><div id="timeDisplay"></div></header><div class="container"><div id="powerConsumptionChart" class="chart"></div><div id="energyTypeChart" class="chart"></div><div id="energyEfficiencyChart" class="chart"></div><div id="productionLineChart" class="chart"></div><div id="equipmentChart" class="chart"></div><div id="dailyPowerChart" class="chart"></div><div id="monthlyGasChart" class="chart"></div><div id="equipmentEfficiencyChart" class="chart"></div><div id="lineComparisonChart" class="chart"></div></div><script src="script.js"></script><script>// 显示当前时间function updateTime() {const timeDisplay = document.getElementById('timeDisplay');const now = new Date();const timeString = now.toLocaleString();timeDisplay.textContent = `当前时间: ${timeString}`;}// 初始显示时间updateTime();// 每秒更新一次时间setInterval(updateTime, 1000);// 1000 毫秒自动刷新图表setInterval(() => {if (window.initCharts) {window.initCharts();}}, 1000);</script>
</body>
</html>
javascript脚本
// 模拟数据
const mockData = {powerConsumption: [{ time: '00:00', value: 120 },{ time: '01:00', value: 110 },{ time: '02:00', value: 105 },{ time: '03:00', value: 98 },{ time: '04:00', value: 90 },{ time: '05:00', value: 85 },{ time: '06:00', value: 95 },{ time: '07:00', value: 110 },{ time: '08:00', value: 130 },{ time: '09:00', value: 150 },{ time: '10:00', value: 160 },{ time: '11:00', value: 165 },{ time: '12:00', value: 160 }],energyType: [{ name: '电力', value: 700 },{ name: '天然气', value: 300 },{ name: '蒸汽', value: 200 }],energyEfficiency: [{ time: '00:00', value: 0.85 },{ time: '01:00', value: 0.86 },{ time: '02:00', value: 0.84 },{ time: '03:00', value: 0.83 },{ time: '04:00', value: 0.82 },{ time: '05:00', value: 0.81 },{ time: '06:00', value: 0.83 },{ time: '07:00', value: 0.85 },{ time: '08:00', value: 0.87 },{ time: '09:00', value: 0.89 },{ time: '10:00', value: 0.9 },{ time: '11:00', value: 0.91 },{ time: '12:00', value: 0.9 }], productionLines: [{ name: '生产线1', power: 300, gas: 150 },{ name: '生产线2', power: 250, gas: 120 },{ name: '生产线3', power: 350, gas: 180 }],equipments: [{ name: '设备A', power: 120, gas: 60 },{ name: '设备B', power: 100, gas: 50 },{ name: '设备C', power: 130, gas: 70 },{ name: '设备D', power: 100, gas: 50 }],dailyPower: [{ day: '周一', power: 1000 },{ day: '周二', power: 1100 },{ day: '周三', power: 1050 },{ day: '周四', power: 1200 },{ day: '周五', power: 1300 },{ day: '周六', power: 800 },{ day: '周日', power: 700 }],monthlyGas: [{ month: '1月', gas: 3000 },{ month: '2月', gas: 3200 },{ month: '3月', gas: 3500 },{ month: '4月', gas: 3300 },{ month: '5月', gas: 3600 },{ month: '6月', gas: 3400 },{ month: '7月', gas: 3700 },{ month: '8月', gas: 3800 },{ month: '9月', gas: 3500 },{ month: '10月', gas: 3600 },{ month: '11月', gas: 3400 },{ month: '12月', gas: 3300 }],equipmentEfficiency: [{ name: '设备A', efficiency: 0.85 },{ name: '设备B', efficiency: 0.88 },{ name: '设备C', efficiency: 0.9 },{ name: '设备D', efficiency: 0.87 }],lineComparison: [{ name: '生产线1', power: 300, gas: 150 },{ name: '生产线2', power: 250, gas: 120 },{ name: '生产线3', power: 350, gas: 180 }]
};// 初始化用电量图表
function initPowerConsumptionChart() {const chartDom = document.getElementById('powerConsumptionChart');const myChart = echarts.init(chartDom);const option = {title: {text: '电力消耗图表',textStyle: {color: '#fff'}},tooltip: {trigger: 'axis'},xAxis: {type: 'category',data: mockData.powerConsumption.map(item => item.time)},yAxis: {type: 'value'},series: [{data: mockData.powerConsumption.map(item => item.value),type: 'line'}]};myChart.setOption(option);
}// 初始化能源类型图表
function initEnergyTypeChart() {const chartDom = document.getElementById('energyTypeChart');const myChart = echarts.init(chartDom);const option = {title: {text: '能源类型图表',textStyle: {color: '#fff'}},tooltip: {trigger: 'item'},series: [{name: '能源类型',type: 'pie',radius: '50%',data: mockData.energyType,emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};myChart.setOption(option);
}// 初始化能源效率图表
function initEnergyEfficiencyChart() {const chartDom = document.getElementById('energyEfficiencyChart');const myChart = echarts.init(chartDom);const option = {title: {text: '能源效率图表',textStyle: {color: '#fff'}},tooltip: {trigger: 'axis'},xAxis: {type: 'category',data: mockData.energyEfficiency.map(item => item.time)},yAxis: {type: 'value',min: 0.8,max: 0.95},series: [{data: mockData.energyEfficiency.map(item => item.value),type: 'line'}]};myChart.setOption(option);
}// 初始化生产线图表
function initProductionLineChart() {const chartDom = document.getElementById('productionLineChart');const myChart = echarts.init(chartDom);const option = {title: {text: '按生产线统计电力和气使用量',textStyle: {color: '#fff'}},tooltip: {trigger: 'axis'},xAxis: {type: 'category',data: mockData.productionLines.map(item => item.name)},yAxis: {type: 'value'},series: [{data: mockData.productionLines.map(item => item.power),type: 'bar'}]};myChart.setOption(option);
}// 初始化设备图表
function initEquipmentChart() {const chartDom = document.getElementById('equipmentChart');const myChart = echarts.init(chartDom);const option = {title: {text: '按设备统计电力和气使用量',textStyle: {color: '#fff'}},tooltip: {trigger: 'axis'},xAxis: {type: 'category',data: mockData.equipments.map(item => item.name)},yAxis: {type: 'value'},series: [{data: mockData.equipments.map(item => item.power),type: 'bar'}]};myChart.setOption(option);
}// 新增每日电力使用量图表
function initDailyPowerChart() {const chartDom = document.getElementById('dailyPowerChart');const myChart = echarts.init(chartDom);const option = {title: {text: '每日电力使用量',textStyle: {color: '#fff'}},tooltip: {trigger: 'axis'},xAxis: {type: 'category',data: mockData.dailyPower.map(item => item.day)},yAxis: {type: 'value'},series: [{data: mockData.dailyPower.map(item => item.power),type: 'bar'}]};myChart.setOption(option);
}// 新增每月气使用量图表
function initMonthlyGasChart() {const chartDom = document.getElementById('monthlyGasChart');const myChart = echarts.init(chartDom);const option = {title: {text: '每月气使用量',textStyle: {color: '#fff'}},tooltip: {trigger: 'axis'},xAxis: {type: 'category',data: mockData.monthlyGas.map(item => item.month)},yAxis: {type: 'value'},series: [{data: mockData.monthlyGas.map(item => item.gas),type: 'line'}]};myChart.setOption(option);
}// 新增设备效率图表
function initEquipmentEfficiencyChart() {const chartDom = document.getElementById('equipmentEfficiencyChart');const myChart = echarts.init(chartDom);const option = {title: {text: '设备效率',textStyle: {color: '#fff'}},tooltip: {trigger: 'item'},xAxis: {type: 'category',data: mockData.equipmentEfficiency.map(item => item.name)},yAxis: {type: 'value',min: 0.8,max: 0.95},series: [{data: mockData.equipmentEfficiency.map(item => item.efficiency),type: 'bar'}]};myChart.setOption(option);
}// 新增生产线对比图表
function initLineComparisonChart() {const chartDom = document.getElementById('lineComparisonChart');const myChart = echarts.init(chartDom);const option = {title: {text: '生产线电力和气对比',textStyle: {color: '#fff'}},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {color: '#999'}}},legend: {data: ['电力', '气']},xAxis: {type: 'category',data: mockData.lineComparison.map(item => item.name)},yAxis: {type: 'value'},series: [{name: '电力',type: 'bar',data: mockData.lineComparison.map(item => item.power)},{name: '气',type: 'bar',data: mockData.lineComparison.map(item => item.gas)}]};myChart.setOption(option);
}// 更新初始化所有图表的函数
function initCharts() {initPowerConsumptionChart();initEnergyTypeChart();initEnergyEfficiencyChart();initProductionLineChart();initEquipmentChart();initDailyPowerChart();initMonthlyGasChart();initEquipmentEfficiencyChart();initLineComparisonChart();
}// 页面加载完成后初始化图表
window.onload = initCharts;css样式
/* 全局样式 */
* {box-sizing: border-box;margin: 0;padding: 0;
}body {font-family: 'Orbitron', sans-serif;background-color: #000;color: #0f0;min-height: 100vh;overflow-x: hidden;
}/* 表头样式 */
header {background-color: rgba(0, 0, 0, 0.8);padding: 20px 0;box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);border-bottom: 2px solid #0f0;display: flex;flex-direction: column;align-items: center;gap: 10px;
}header h1 {text-align: center;font-size: 2.5rem;text-shadow: 0 0 15px #0f0, 0 0 30px #0f0;letter-spacing: 3px;animation: neonGlow 1.5s ease-in-out infinite alternate;
}@keyframes neonGlow {from {text-shadow: 0 0 10px #0f0, 0 0 20px #0f0, 0 0 30px #0f0;}to {text-shadow: 0 0 20px #0f0, 0 0 40px #0f0, 0 0 60px #0f0;}
}/* 时间显示样式 */
#timeDisplay {text-align: center;font-size: 1.2rem;text-shadow: 0 0 10px #0f0;
}/* 图表容器样式 */
.container {display: grid;grid-template-columns: repeat(3, 1fr);gap: 30px;padding: 30px;
}.chart {background-color: rgba(0, 0, 0, 0.6);border-radius: 10px;border: 2px solid #0f0;box-shadow: 0 0 20px rgba(0, 255, 0, 0.2);height: 400px;transition: all 0.3s ease;position: relative;overflow: hidden;
}.chart::before {content: '';position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;background: linear-gradient(45deg, rgba(0, 255, 0, 0.1), rgba(0, 255, 0, 0.3));transform-origin: bottom right;animation: rotate 6s linear infinite;opacity: 0.3;
}.chart::after {content: '';position: absolute;inset: 4px;background: #000;border-radius: 10px;
}.chart:hover {transform: translateY(-10px);box-shadow: 0 0 30px rgba(0, 255, 0, 0.5);
}@keyframes rotate {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}
}/* 图表内容区域，确保内容显示在遮罩之上 */
.chart > * {position: relative;z-index: 10;
}
