效果图
🌟【定制化开发服务，让您的项目领先一步】🌟
如有需求，直接私信留下您的联系方式。谢谢。
我的邮箱：2351598671@qq.com
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>智慧大屏可视化项目</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #000f2d;
color: #fff;
font-family: Arial, sans-serif;
}
.dashboard {
padding: 20px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
height: 100vh;
}
.panel {
background: rgba(6, 30, 93, 0.5);
border: 1px solid #0e4b91;
padding: 15px;
border-radius: 5px;
}
.header {
font-size: 24px;
text-align: center;
color: #00f2ff;
padding: 20px 0;
grid-column: 1 / -1;
}
.chart {
height: 300px;
}
.data-list {
height: 300px;
overflow-y: auto;
}
.data-item {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #0e4b91;
}
.number {
font-size: 24px;
color: #00f2ff;
text-align: center;
margin: 10px 0;
}
</style>
</head>
<body>
<div id="app">
<div class="dashboard">
<div class="header">智慧城市运营监控中心</div>
<!-- 实时数据面板 -->
<div class="panel">
<h3>实时监控数据</h3>
<div class="number">{{ realTimeData.visitors }}</div>
<p style="text-align: center">当前访问人数</p>
<div class="data-list">
<div class="data-item" v-for="(item, index) in realTimeData.events" :key="index">
<span>{{ item.time }}</span>
<span>{{ item.event }}</span>
</div>
</div>
</div>
<!-- 折线图 -->
<div class="panel">
<h3>访问趋势分析</h3>
<div ref="lineChart" class="chart"></div>
</div>
<!-- 饼图 -->
<div class="panel">
<h3>用户分布</h3>
<div ref="pieChart" class="chart"></div>
</div>
<!-- 图片展示 -->
<div class="panel">
<h3>监控画面</h3>
<img src="/api/placeholder/400/320" alt="监控画面1" style="width: 100%; height: 200px; object-fit: cover;">
</div>
<!-- 柱状图 -->
<div class="panel">
<h3>资源使用率</h3>
<div ref="barChart" class="chart"></div>
</div>
<!-- 表格数据 -->
<div class="panel">
<h3>告警信息</h3>
<div class="data-list">
<div class="data-item" v-for="(alert, index) in alertData" :key="index">
<span>{{ alert.time }}</span>
<span :style="{color: alert.level === '高' ? '#ff4444' : '#ffaa00'}">{{ alert.message }}</span>
</div>
</div>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
realTimeData: {
visitors: 1234,
events: [
{ time: '14:30:21', event: '系统正常运行中' },
{ time: '14:29:45', event: '数据备份完成' },
{ time: '14:28:30', event: '新用户注册' },
{ time: '14:27:15', event: '系统更新完成' }
]
},
alertData: [
{ time: '14:30:00', level: '高', message: '服务器负载过高' },
{ time: '14:25:00', level: '中', message: '数据库连接波动' },
{ time: '14:20:00', level: '高', message: '网络延迟异常' },
{ time: '14:15:00', level: '中', message: '存储空间警告' }
]
},
mounted() {
this.initLineChart();
this.initPieChart();
this.initBarChart();
this.startDataUpdate();
},
methods: {
initLineChart() {
const chart = echarts.init(this.$refs.lineChart);
const option = {
textStyle: {
color: '#fff'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320, 1000],
type: 'line',
smooth: true,
lineStyle: {
color: '#00f2ff'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0,242,255,0.5)'
}, {
offset: 1,
color: 'rgba(0,242,255,0.1)'
}])
}
}]
};
chart.setOption(option);
},
initPieChart() {
const chart = echarts.init(this.$refs.pieChart);
const option = {
textStyle: {
color: '#fff'
},
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center',
textStyle: {
color: '#fff'
}
},
series: [{
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: '移动端' },
{ value: 735, name: 'PC端' },
{ value: 580, name: '平板' },
{ value: 484, name: '其他' }
]
}]
};
chart.setOption(option);
},
initBarChart() {
const chart = echarts.init(this.$refs.barChart);
const option = {
textStyle: {
color: '#fff'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: ['CPU', '内存', '磁盘', '带宽'],
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
series: [{
data: [70, 85, 65, 90],
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#83bff6'
}, {
offset: 0.5,
color: '#188df0'
}, {
offset: 1,
color: '#188df0'
}])
}
}]
};
chart.setOption(option);
},
startDataUpdate() {
setInterval(() => {
this.realTimeData.visitors = Math.floor(1000 + Math.random() * 500);
const newEvent = {
time: new Date().toLocaleTimeString(),
event: '系统状态更新'
};
this.realTimeData.events.unshift(newEvent);
if (this.realTimeData.events.length > 10) {
this.realTimeData.events.pop();
}
}, 3000);
}
}
});
</script>
</body>
</html>
