用代码写一个可视化大屏的事例页面,内容丰富些
时间: 2024-06-09 07:04:34 浏览: 11
以下是一个简单的可视化大屏事例页面,包含了实时数据图表、地图、视频等多种内容。
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>可视化大屏</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/echarts.min.js"></script>
</head>
<body>
<div id="map" style="width: 50%; height: 80vh; float: left;"></div>
<div id="video" style="width: 50%; height: 80vh; float: right;"></div>
<div id="chart" style="width: 100%; height: 20vh; margin-top: 20px;"></div>
</body>
</html>
```
JavaScript 代码:
```javascript
// 初始化地图
var myChart = echarts.init(document.getElementById('map'));
myChart.setOption({
series: [{
type: 'map',
map: 'china'
}]
});
// 初始化视频
var player = new Aliplayer({
id: 'video',
source: 'http://player.alicdn.com/video/aliyunmedia.mp4',
width: '100%',
height: '100%',
autoplay: true,
isLive: false,
rePlay: false,
playsinline: true,
preload: true,
controlBarVisibility: 'hover',
useH5Prism: true
});
// 初始化图表
var chart = echarts.init(document.getElementById('chart'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
series: [{
name: '温度',
type: 'line',
data: [11, 11, 15, 13, 12, 13, 10],
markPoint: {
data: [{
type: 'max',
name: '最大值'
}, {
type: 'min',
name: '最小值'
}]
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
}
}]
};
chart.setOption(option);
// 模拟实时数据更新
setInterval(function() {
var data = [];
for (var i = 0; i < 7; i++) {
data.push(Math.round(Math.random() * 10 + 10));
}
option.series[0].data = data;
chart.setOption(option);
}, 5000);
```
解释:
1. 首先,我们使用 ECharts 库初始化一个地图,并在页面左侧显示。地图数据使用的是中国地图,可以根据需要替换为其他地图数据。
2. 接着,我们使用阿里云的视频播放器库初始化一个视频,并在页面右侧显示。需要替换的是视频地址,可以使用自己的视频地址。
3. 最后,我们使用 ECharts 库初始化一个图表,并在页面底部显示。图表数据是随机生成的,每隔 5 秒钟更新一次。可以根据需要替换为自己的数据。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)