**
基于echarts+PHP+MySQL的数据大屏
**
最近学习了如何使用echarts+PHP+MySQL制作出数据大屏，简单地阐述下我学习，制作过程，希望能给到想要学习类似数据可视化界面的朋友们一些建议。
因为我使用的语言是PHP(当然Python感觉也行),因此没有任何基础的同学，我建议先去学习一些相关的基础，一般来说，学习界面制作需要的知识都是JavaScript + HTML + PHP。
相关的学习网站，我推荐慕课网与菜鸟教程，都会有比较详细的教程
慕课网
菜鸟教程
学习完相关基础教程后，相信各位朋友对网页制作已经有一定的认知，接下来就是要搭建相关编程环境，为了让朋友制作更为方便，推荐一个公众号:软件安装管家，关注输出PHPStorm即可下载相关编译软件，对于PHP运行还需要下载一个PHPstudy集成环境，能一步到位地使用PHP编译环境，鉴于博主都是上网随机下载的，在这就不添加下载网站了，度娘了解一下。
下载安装成功之后，就正式进入到数据大屏的制作了，先给朋友们看看，我最后做出来的结果是如何的:
在这个数据大屏中，实现了基于Ajax调用了后台数据库，回馈到前端界面中进行一个数据可视化处理，同时添加了一个定时器，能在规定时间内刷新对后天数据的读取，从而数据大屏的展示效果。
这是我建立的文件目录集:
由于代码量有点多，因此会拆开几部分去说，先说一下页面布局设置，想要数据大屏漂亮，就需要对数据大屏的页面进行页面布局，需要设计好页面的框架分布，大小间隔，颜色等，还需考虑好布局时所需要用的图片，背景等，知道各位朋友的心态，放心除了源码，图片我也会给到你们的，优秀。
**
CSS: style.php
**
body {
margin: 0;
padding: 0;
height: 100%;
}
html {
font-family: "微软雅黑";
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
background-color: #0b122e;
color: #fff;
position: relative;
font-family: "微软雅黑";
}
table
{
border-collapse:collapse;
}
img{vertical-align: middle;}
ul { margin: 0; padding: 0;}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
overflow: hidden;
}
.clearfix {
*zoom: 1;
}
header{width:100%; height: 90px; background: url(../images/bg_top.png) center no-repeat ; text-align: center; font-size: 36px; color: #00f6ff; line-height: 90px; margin: 0 auto;}
#content{width: 1860px; height: 100%; margin: 20px auto 0 auto;}
#content .content_left{width: 385px; height: 100%; float: left;}
/*.content_left .dtuplc{width: 355px; height: 180px; padding: 15px 15px 0 15px; background: url(../images/zuoyi.png) top no-repeat;}*/
.content_left .dtuplc{width: 355px; height: 180px; padding: 15px 15px 0 15px; background: url(../images/zuoyi.png) top no-repeat;}
.content_left .dtuplc p{font-weight: bold; font-size: 18px;color: #FF0000;}
.content_left .dtuplc small{font-size: 24px;}
.dtu{width: 177px; height: 180px; float: left;}
.plc{width: 177px; height: 180px; float: left;}
.content_left .online{width: 385px; height: 330px; float: left; background: url(../images/zuo2.png) no-repeat;}
.content_left .title{width: 385px; height: 70px; float: left; color: #00f6ff; font-size: 20px; line-height: 70px; background:url(../images/bottom_line.png) bottom no-repeat; text-align: center;}
.content_left .title img{vertical-align: middle;}
.online .online_con{width: 365px; height: 240px; padding: 10px; float: left;}
.content_left .industry{width: 385px; height: 425px; float: left; background: url(../images/hangye.png) no-repeat; margin-top: 20px;}
.industry .industry_con{width: 365px; height: 335px; padding: 10px; float: left;}
#content .content_center{width: 1050px; height: 100%; float: left; margin-left: 20px;}
.content_center .center_top{width: 1050px; height: 650px; float: left; background: url(../images/center01.png) no-repeat;}
.content_center .title{width: 1050px; height: 70px; float: left; color: #00f6ff; font-size: 20px; line-height: 70px; background:url(../images/bottom_line.png) bottom center no-repeat; text-align: center;}
.content_center .title img{vertical-align: middle;}
.content_center .center_top_con{ height: 550px; width: 1000px; padding: 10px; float: left;}
.panel-table {text-align: left;color: #ccc;margin: 0 auto !important;width: 96%; margin-top: 20px !important;padding: 0.5rem 0 !important;font-size: 1.2rem;}
.content_center .center_bot{width: 990px; height: 280px; float: left; background: url(../images/center02.png) no-repeat; margin-top: 20px; padding: 10px 30px;}
tr.aaa:hover{background: #1d3152; cursor: pointer;}
.b1{width: 70px; height: 25px; background: #FF0000; cursor: pointer; color: #FFFFFF; border: none; border-radius:3px ;}
.b2{width: 70px; height: 25px; background: #2897c4; cursor: pointer; color: #FFFFFF; border: none; border-radius:3px ;}
.b3{width: 70px; height: 25px; background: #36791a; cursor: pointer; color: #FFFFFF; border: none; border-radius:3px ;}
#content .content_right{width: 385px; height: 100%; float: right;}
.content_right .report{width: 325px; height: 145px; line-height: 20px; float: left; background:url(../images/zuoyi.png) top no-repeat; padding: 35px 30px 0 30px;}
.report1{width: 134px; height: 110px; background: url(../images/report01.png) center no-repeat; float: left; text-align: center; padding-top: 24px;}
.report2{width: 134px; height: 110px; background: url(../images/report02.png) center no-repeat; float: right; text-align: center; padding-top: 24px;}
.report p{ font-weight: bold; font-size: 18px; color: #ff0000;}
.report small{font-size: 24px;}
.content_right .news_report{width: 385px; height: 330px; margin-top: 20px; float: left; background: url(../images/bg_report.png) no-repeat;}
.content_right .title{width: 385px; height: 70px; float: left; color: #00f6ff; font-size: 20px; line-height: 70px; background:url(../images/bottom_line.png) bottom no-repeat; text-align: center;}
.content_right .title img{vertical-align: middle;}
.news_list{width: 350px; height: 240px; padding: 10px; font-size: 16px; float: left; overflow: hidden;}
.news_list ul{list-style: none;}
.news_list ul li{width:100%; height: 38px; float: left; line-height: 38px; padding-left: 15px;}
.li01{background: url(../images/new_list01.png) left center no-repeat;}
.li02{background: url(../images/new_list02.png) left center no-repeat; color: #FF0000;}
.content_right .data_box{width: 385px; height: 420px; margin-top: 20px; float: left; background: url(../images/bg_data.png) no-repeat;}
.data_con{width: 365px; height: 330px; float: left; padding: 10px;}
/*弹窗*/
.pop,.pop2,.pop3 {display: none; width: 800px; min-height: 570px; max-height: 750px; height:570px; position: absolute; left: 0; right: 0; margin:auto; padding: 25px; z-index: 130; border-radius: 3px; background-color: #23509a; border: #fff solid 1px; box-shadow: 0 5px 18px rgba(100, 0, 0, .5); }
.pop-top{ text-align: center; font-size: 20px; font-weight:bold; color: #ff6f05; height:40px; width:100%; background: url(../images/line.png) no-repeat bottom center;}
.pop-top span{ float: right; cursor: pointer; color: #fff; font-weight: bold; display:black}
.pop-foot{ height:50px; line-height:50px; width:100%; border-top: 1px #5682dc solid; text-align: right; }
.pop-cancel{ padding:8px 15px; margin:15px 5px; border: none; border-radius: 5px; background-color: #ff6f05; color: #fff; cursor:pointer; }
.pop-content{ height: 480px;}
.bgPop,.bgPop2,.bgPop3{ display: none; position: absolute; z-index: 129; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.2);}
.t_left_box{
position: relative;
width: 3.36rem;
height: 4.6rem;
display: inline-block;
text-align: center;
}
.t_l_line{
position: absolute;
top: 0;
left: 0;
}
.t_r_line{
position: absolute;
bottom: 0;
right: 0;
}
.t_center_box{
width: 6.82rem;
display: inline-block;
min-width: 490px;
}
.t_top_box{
width: 100%;
height: 1.13rem;
overflow: hidden;
position: relative;
margin-bottom: 0.2rem;
}
.t_bottom_box{
width: 100%;
height: 3.17rem;
overflow: hidden;
position: relative;
}
.t_mbox{
width: 3rem;
height: 1.28rem;
position: relative;
margin: 0 auto;
margin-top: 0.2rem;
}
.t_rbox{
background: #D9523F;
}
.t_gbox{
background: #13D0B2;
}
.t_ybox{
background: #F6A645;
}
.t_rbox i{
background: url(../images/indent.png) no-repeat;
background-size: 100% 100%;
}
.t_gbox i{
background: url(../images/vip.png) no-repeat;
background-size: 100% 100%;
}
.t_ybox i{
background: url(../images/consumption.png) no-repeat;
background-size: 100% 100%;
}
.t_mbox i{
display: inline-block;
width: 0.46rem;
height: 0.48rem;
position: absolute;
top: 0;
bottom: 0;
left: 20%;
margin: auto;
}
.t_mbox h2{
font-size: 0.28rem;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
}
.t_mbox span{
font-size: 0.2rem;
color: #fff;
position: absolute;
top: 24%;
left: 48%;
}
.t_main{
width: 98%;
height: 8.74rem;
margin: 0 auto;
margin-top: 0.2rem;
margin-bottom: 0;
}
.bar{background:rgba(101,132,226,.1); padding: .15rem;}
.barbox li,.barbox2 li{ width:30%; text-align: center; position: relative; z-index: 100;}
.barbox:before,
.barbox:after{ position:absolute; width: .3rem; height: .1rem; content: ""; }
.barbox:before{border-left: 2px solid #02a6b5;left: 0;border-top: 2px solid #02a6b5; }
.barbox:after{border-right: 2px solid #02a6b5; right: 0; bottom: 0;border-bottom: 2px solid #02a6b5; }
.barbox li:first-child:before{ position:absolute; content: ""; height:50%; width: 2px; background: rgba(255,255,255,.2); right: 0; top: 25%;}
.barbox{ border: 3px solid rgba(25,186,139,.17); position: relative;}
.barbox li{ font-size: 3rem; color: #ffeb7b; padding: .1rem 0; font-family:electronicFont; font-weight: bold;}
.barbox2 li{ font-size: 1rem; color:rgba(255,255,255,.7); padding-top: .1rem;}
clearfix:after, .clearfix:before {
display: table;
content: " "
}
.clearfix:after {
clear: both
}
.pulll_left{float:left;}
**
index.html
**
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数据大屏</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script src="/js/echarts.min.js"></script>
</head>
<body>
<header>
AI广科数据监控
<span id=localtime style=" font-size:14px; position: absolute; right: 30px; top:-20px; "></span>
</header>
<div id="content">
<div class="content_left">
<!-- <div class="dtuplc">-->
<!-- <div class="dtu">-->
<!-- <div id="container" style="height: 100%;"></div>-->
<!-- </div>-->
<!-- <div class="plc">-->
<!-- <div id="container1" style="height: 100%"></div>-->
<!-- </div>-->
<!-- </div>-->
<div class="dtuplc">
<div class="report1">
<p>驾校</p>
<small>{{alarm2.alarm}}</small>
</div>
<div class="report2">
<p>团购</p>
<small>{{alarm2.fault}} </small>
</div>
</div>
<!--
DTU和PLC完
-->
<div class="online">
<div class="title"><img src="images/icon01.png" /> 热门关键词</div>
<div class="online_con" id="container2">
</div>
</div>
<!-- <div class="industry">-->
<!-- <div class="title"><img src="images/icon02.png" /> 接入工厂类型</div>-->
<!-- <div class="industry_con" id="container3"></div>-->
<!-- </div>-->
<div class="industry">
<div class="title"><img src="images/icon02.png" /> Top5商品下单排行</div>
<div class="data_con" id="container3">
</div>
</div>
</div>
<div class="content_center">
<div class="center_top">
<div class="title"><img src="images/icon03.png" /> 平台订单趋势</div>
<div class="center_con">
<img class="t_l_line" src="images/left_line.png" alt="">
<div id="chart_2" class="echart" style="width: 100%; height: 35rem;"></div>
<img class="t_r_line" src="images/right_line.png" alt="">
<!-- <img class="t_l_line" src="images/left_line.png" alt="">-->
<!-- <div id="chart_1" class="echart" style="width: 600px;height:400px;"></div>-->
<!-- <img class="t_r_line" src="images/right_line.png" alt="">-->
</div>
</div>
<div class="center_bot">
<table class="panel-table"bordercolor="#0d48e0" border="1">
<thead bgcolor="#0e4ae0" align="center" >
<tr height="40">
<th colspan="6"><img src="images/icon04.png" /> 今日实时数据</th>
<div class="bar">
<div class="barbox">
<ul class="clearfix">
<li class="pulll_left ">25420</li>
<li class="pulll_left ">50000</li>
<li class="pulll_left ">100000</li>
</ul>
</div>
<div class="barbox2">
<ul class="clearfix">
<li class="pulll_left">平台访问量 </li>
<li class="pulll_left">平台订单量</li>
<li class="pulll_left">平台订单金额</li>
</ul>
</div>
</div>
</tr>
</thead>
<tbody>
<tr class="aaa" align="center">
<td v-for="item in factoryHeader" style="color: #00fcff; font-size: 18px; padding: 5px 0;">{{ item.categories }}</td>
</tr>
<!-- <tr v-for="y in factory.slice(0,6)" class="aaa" style="font-size: 16px;" align="center" >-->
<!-- <td>{{ ypany }}</td>-->
<!-- <td>{{ y.dtuCnt }}</td>-->
<!-- <td>{{ y.plcCnt }}</td>-->
<!-- <td>{{ y.dataCnt }}</td>-->
<!-- <td>{{ y.alarm }}</td>-->
<!-- <td width="250">-->
<!-- F <button class="b1 click_pop">报警记录</button>-->
<!-- <button class="b2 click_pop2">历史数据</button>-->
<!-- <button class="b3 click_pop3">组态应用</button>-->
<!-- </td>-->
<!-- </tr>-->
</tbody>
</table>
</div>
</div>
<div class="content_right">
<div class="report">
<div class="report1">
<p>商城</p>
<small>{{alarm.alarm}}</small>
</div>
<div class="report2">
<p>饭堂</p>
<small>{{alarm.fault}} </small>
</div>
</div>
<div class="news_report">
<div class="title"><img src="images/icon05.png" /> 订单记录</div>
<!-- <div class="news_list">-->
<!-- <ul>-->
<!-- <p style="display:list-item; list-style-type:disc; margin-left:2em">-->
<!-- 2020-08-11 18:03:56<br>商家名称；5G工作室 订单金额：10000<br>-->
<!-- </p>-->
<!-- <p style="display:list-item; list-style-type:disc; margin-left:2em">-->
<!-- 2020-08-11 18:04:56<br>商家名称；七点蛋糕自造 订单金额：20000<br>-->
<!-- </p>-->
<!-- <p style="display:list-item; list-style-type:disc; margin-left:2em">-->
<!-- 2020-08-11 18:05:56<br>商家名称；科干自营店 订单金额：30000<br>-->
<!-- </p>-->
<!-- </ul>-->
<!-- </div>-->
<div class="news_list" id="message"></div>
</div>
<div class="data_box">
<div class="title"><img src="images/icon06.png" /> To5商家销售金额排行</div>
<div class="data_con" id="container4"></div>
</div>
</div>
</div>
<!--遮罩层-->
<div class="bgPop"></div>
<!--弹出框-->
<div class="pop">
<div class="pop-top">
报警记录
<span class="pop-close">Ｘ</span>
</div>
<div class="pop-content">
<table class="panel-table" bordercolor="#deefff" border="1">
<thead bgcolor="#971212" align="center" >
<tr height="38">
<th>字段</th>
<th>字段</th>
<th>字段</th>
<th>字段</th>
<th>字段</th>
</tr>
</thead>
<tbody>
<tr class="aaa" style="font-size: 16px;" align="center" >
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="aaa" style="font-size: 16px;" align="center" >
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="aaa" style="font-size: 16px;" align="center" >
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="aaa" style="font-size: 16px;" align="center" >
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
<div class="pop-foot">
<input type="button" value="确定" class="pop-cancel pop-close">
</div>
</div>
<script>
$(document).ready(function () {
$('.pop-close').click(function () {
$('.bgPop,.pop').hide();
});
$('.click_pop').click(function () {
$('.bgPop,.pop').show();
});
})
</script>
<!--遮罩层-->
<div class="bgPop2"></div>
<!--弹出框-->
<div class="pop2">
<div class="pop-top">
历史记录
<span class="pop-close">Ｘ</span>
</div>
<div class="pop-content">
<table class="panel-table" bordercolor="#deefff" border="1">
<thead bgcolor="#10aaa5" align="center" >
<tr height="38">
<th>字段</th>
<th>字段</th>
<th>字段</th>
<th>字段</th>
<th>字段</th>
</tr>
</thead>
<tbody>
<tr class="aaa" style="font-size: 16px;" align="center" >
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="aaa" style="font-size: 16px;" align="center" >
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="aaa" style="font-size: 16px;" align="center" >
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="aaa" style="font-size: 16px;" align="center" >
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
<div class="pop-foot">
<input type="button" value="确定" class="pop-cancel pop-close">
</div>
</div>
<script>
$(document).ready(function () {
$('.pop-close').click(function () {
$('.bgPop2,.pop2').hide();
});
$('.click_pop2').click(function () {
$('.bgPop2,.pop2').show();
});
})
</script>
<!--遮罩层-->
<div class="bgPop3"></div>
<!--弹出框-->
<div class="pop3">
<div class="pop-top">
组态应用
<span class="pop-close">Ｘ</span>
</div>
<div class="pop-content">
组态应用
</div>
<div class="pop-foot">
<input type="button" value="确定" class="pop-cancel pop-close">
</div>
</div>
<script>
$(document).ready(function () {
$('.pop-close').click(function () {
$('.bgPop3,.pop3').hide();
});
$('.click_pop3').click(function () {
$('.bgPop3,.pop3').show();
});
})
</script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/china.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript" src="js/times.js"></script>
<script type="text/javascript" src="js/DTU.js"></script>
<script type="text/javascript" src="js/PLC.js"></script>
<script type="text/javascript" src="js/online.js"></script>
<script type="text/javascript" src="js/industry.js"></script>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/message_list.js"></script>
</body>
</html>
在HTML文件中，存在着一些静态网页的设置，也存在动态网页的设置，至于要使用哪一个模式，就看各位朋友的选择。
第一次写博客，只是希望将我学的东西能分享给你们，给予你们一些帮助，缓解一下当要做这类东西时，没有完整的教程是一件
多么痛苦的事情啊，ok，剩下的我会抽时间写出来的。
更多推荐
基于echarts+PHP+MySQL的数据大屏
发布评论