效果图
🌟【定制化开发服务，让您的项目领先一步】🌟
如有需求，直接私信留下您的联系方式。谢谢。
我的邮箱：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>
