来个数据展示大屏的前端页面代码
时间: 2023-08-24 15:03:45 浏览: 57
以下是一个简单的数据展示大屏的前端页面代码,包括了使用echarts库绘制图表和使用Bootstrap布局:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据展示大屏</title>
<!-- 引入echarts库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<!-- 引入Bootstrap库 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<!-- 标题 -->
<div class="row">
<div class="col-md-12">
<h1 class="text-center">数据展示大屏</h1>
</div>
</div>
<!-- 图表1 -->
<div class="row">
<div class="col-md-6">
<div id="chart1" style="width: 100%; height: 400px;"></div>
</div>
<div class="col-md-6">
<div id="chart2" style="width: 100%; height: 400px;"></div>
</div>
</div>
<!-- 图表2 -->
<div class="row">
<div class="col-md-12">
<div id="chart3" style="width: 100%; height: 400px;"></div>
</div>
</div>
</div>
<script>
// 初始化echarts图表1
var chart1 = echarts.init(document.getElementById('chart1'));
var option1 = {
title : {
text: '图表1',
x:'center'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['数据1','数据2']
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'数据1',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'数据2',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310]
}
]
};
chart1.setOption(option1);
// 初始化echarts图表2
var chart2 = echarts.init(document.getElementById('chart2'));
var option2 = {
title : {
text: '图表2',
x:'center'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['数据1','数据2']
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'数据1',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'数据2',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310]
}
]
};
chart2.setOption(option2);
// 初始化echarts图表3
var chart3 = echarts.init(document.getElementById('chart3'));
var option3 = {
title : {
text: '图表3',
x:'center'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['数据1','数据2']
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'数据1',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'数据2',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310]
}
]
};
chart3.setOption(option3);
</script>
</body>
</html>
```
以上代码中,通过使用Bootstrap的网格系统和容器,实现了对图表的排版布局。同时,为了绘制图表,使用了echarts库,并且通过JavaScript代码初始化并设置图表的选项。最后,在HTML页面中使用div标签创建了三个占据不同位置的图表。