<think>我们被要求提供
智慧校园数据可视化的HTML代码示例。由于数据可视化通常需要使用JavaScript库（如ECharts、Chart.js等），而HTML主要提供结构，因此我们将结合一个简单示例展示如何使用ECharts在HTML页面中创建数据可视化图表。根据引用[1]和引用[2]，我们看到Vue.js被用作前端框架，但用户没有明确要求使用Vue，而是直接要求HTML代码。因此，我们可以提供一个纯HTML+JavaScript的示例，不使用Vue。当然，如果用户需要，也可以提供一个基于Vue的示例，但用户问题中明确要求的是HTML代码。考虑到
智慧校园的常见数据可视化需求，例如展示教室使用情况、学生出勤率、能耗等，我们可以选择一个简单的柱状图作为示例。我们将使用ECharts库，因为它功能强大且易于使用。首先，我们需要在HTML中引入ECharts的JS文件（这里使用CDN方式）。注意：该示例代码仅展示基本结构，实际
智慧校园应用可能需要从后端获取数据，但这里我们使用静态数据。示例场景：展示某
智慧校园各个区域的能耗情况。下面是完整的HTML代码示例：</think>
###
智慧校园数据可视化 HTML 示例代码
以下是一个完整的
智慧校园数据可视化示例代码，使用 ECharts 库实现多种图表展示。该示例包含教室使用率、能耗分布、设备状态等核心校园数据的可视化：
```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>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Microsoft YaHei', sans-serif;
}
body {
background-color: #f5f7fa;
padding: 20px;
}
.dashboard-header {
text-align: center;
padding: 20px 0;
background: linear-gradient(135deg, #1a73e8, #0d47a1);
color: white;
border-radius: 8px;
margin-bottom: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.dashboard-title {
font-size: 28px;
font-weight: bold;
margin-bottom: 10px;
}
.dashboard-subtitle {
font-size: 16px;
opacity: 0.9;
}
.chart-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 20px;
}
.chart-card {
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
padding: 15px;
flex: 1;
min-width: 300px;
}
.chart-header {
font-size: 18px;
font-weight: bold;
color: #1a73e8;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.chart-wrapper {
height: 300px;
width: 100%;
}
.full-width {
flex: 0 0 100%;
}
.indicator-panel {
display: flex;
justify-content: space-around;
background-color: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
margin-bottom: 20px;
}
.indicator-item {
text-align: center;
padding: 10px;
}
.indicator-value {
font-size: 32px;
font-weight: bold;
color: #1a73e8;
margin: 10px 0;
}
.indicator-label {
color: #666;
font-size: 14px;
}
</style>
</head>
<body>
<div class="dashboard-header">
<div class="dashboard-title">
智慧校园数据可视化平台</div>
<div class="dashboard-subtitle">教学楼数据实时监测与分析</div>
</div>
<!-- 关键指标面板 -->
<div class="indicator-panel">
<div class="indicator-item">
<div class="indicator-label">教室使用率</div>
<div class="indicator-value">72%</div>
</div>
<div class="indicator-item">
<div class="indicator-label">今日能耗</div>
<div class="indicator-value">1542 kW·h</div>
</div>
<div class="indicator-item">
<div class="indicator-label">正常运行设备</div>
<div class="indicator-value">93%</div>
</div>
<div class="indicator-item">
<div class="indicator-label">警报事件</div>
<div class="indicator-value">2</div>
</div>
</div>
<!-- 图表容器 -->
<div class="chart-container">
<!-- 教室使用率图表 -->
<div class="chart-card">
<div class="chart-header">教室使用率分析</div>
<div id="usage-chart" class="chart-wrapper"></div>
</div>
<!-- 能耗分布图表 -->
<div class="chart-card">
<div class="chart-header">能耗分布</div>
<div id="energy-chart" class="chart-wrapper"></div>
</div>
<!-- 设备状态图表 -->
<div class="chart-card">
<div class="chart-header">设备运行状态</div>
<div id="device-chart" class="chart-wrapper"></div>
</div>
<!-- 时间趋势图表 -->
<div class="chart-card full-width">
<div class="chart-header">能耗趋势（本周）</div>
<div id="trend-chart" class="chart-wrapper"></div>
</div>
</div>
<script>
// 初始化图表
const usageChart = echarts.init(document.getElementById('usage-chart'));
const energyChart = echarts.init(document.getElementById('energy-chart'));
const deviceChart = echarts.init(document.getElementById('device-chart'));
const trendChart = echarts.init(document.getElementById('trend-chart'));
// 教室使用率配置
usageChart.setOption({
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['1号楼', '2号楼', '3号楼', '实验楼', '图书馆']
},
yAxis: {
type: 'value',
name: '使用率 (%)',
max: 100
},
series: [{
name: '使用率',
type: 'bar',
data: [
78, 65, 82, 56, 72],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#83bff6' },
{ offset: 1, color: '#188df0' }
])
}
}]
});
// 能耗分布配置
energyChart.setOption({
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} kW·h ({d}%)'
},
legend: {
orient: 'vertical',
right: 10,
top: 'center',
data: ['照明系统', '空调系统', '电子设备', '实验设备', '其他']
},
series: [{
name: '能耗分布',
type: 'pie',
radius: ['35%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: true,
formatter: '{b}: {c} kW·h'
},
emphasis: {
label: {
show: true,
fontSize: 16,
fontWeight: 'bold'
}
},
data: [
{ value: 480, name: '照明系统' },
{ value: 645, name: '空调系统' },
{ value: 285, name: '电子设备' },
{ value: 92, name: '实验设备' },
{ value: 40, name: '其他' }
]
}]
});
// 设备状态配置
deviceChart.setOption({
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
bottom: '5%',
left: 'center',
data: ['运行正常', '待维护', '故障']
},
series: [{
name: '设备状态',
type: 'pie',
radius: ['35%', '65%'],
center: ['50%', '40%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [
{ value: 930, name: '运行正常' },
{ value: 50, name: '待维护' },
{ value: 20, name: '故障' }
]
}]
});
// 能耗趋势配置
trendChart.setOption({
tooltip: {
trigger: 'axis'
},
legend: {
data: ['总能耗', '照明', '空调'],
bottom: '3%'
},
grid: {
left: '3%',
right: '4%',
bottom: '12%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value',
name: '能耗 (kW·h)'
},
series: [
{
name: '总能耗',
type: 'line',
smooth: true,
data: [1350, 1420, 1560, 1500, 1480, 1320, 1200],
lineStyle: {
width: 4,
color: '#1a73e8'
},
symbol: 'circle',
symbolSize: 8,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(26, 115, 232, 0.6)' },
{ offset: 1, color: 'rgba(26, 115, 232, 0.1)' }
])
}
},
{
name: '照明',
type: 'line',
smooth: true,
data: [460, 480, 520, 500, 480, 420, 400],
lineStyle: {
width: 3,
color: '#34a853'
}
},
{
name: '空调',
type: 'line',
smooth: true,
data: [580, 620, 680, 660, 650, 560, 500],
lineStyle: {
width: 3,
color: '#ea4335'
}
}
]
});
// 响应窗口大小变化
window.addEventListener('resize', function() {
usageChart.resize();
energyChart.resize();
deviceChart.resize();
trendChart.resize();
});
</script>
</body>
</html>
```
### 功能说明
1. **数据概览面板**：顶部展示校园关键指标的实时数据：
- 教室使用率
- 能源消耗情况
- 设备运行状态
- 告警事件数量
2. **四大核心图表**：
- **教室使用率柱状图**：显示各教学楼使用情况对比
- **能耗分布环形图**：可视化展示能源消耗构成比
- **设备状态玫瑰图**：直观呈现设备运行/待维护/故障比例
- **能耗趋势折线图**：展示能源使用的周变化趋势
3. **响应式设计**：
- 自动适应不同屏幕尺寸
- 窗口大小变化时自动重绘图表
- 移动设备友好的布局
### 扩展建议
1. **接入实时数据**：通过 AJAX 连接后端 API，获取实时校园数据
```javascript
// 示例：每30秒获取一次实时数据
setInterval(() => {
fetch('/api/campus-data')
.then(response => response.json())
.then(data => updateCharts(data));
}, 30000);
```
2. **增加交互功能**：
```javascript
// 图表示例点击事件
trendChart.on('click', (params) => {
alert(`查看 ${params.name} 的详细能耗数据`);
});
```
3. **添加更多维度**：
- 学生流动热力图
- 教室预约日历视图
- 设备使用时长排行榜
### 技术说明
- 使用 **ECharts** 库实现专业级数据可视化
- 采用纯前端方案（HTML/CSS/JS）
- **渐变色彩**增强视觉体验
- **响应式布局**适配不同设备
- **交互式提示**增强数据可读性
将此代码保存为 HTML 文件后可直接在浏览器中运行，无需额外配置。
智慧校园平台建设时，可根据实际业务需求定制数据源和图表类型[^1][^2]。
扫一扫
1043
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
