基于echarts+PHP+MySQL的数据大屏

**

基于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;