记录一次小项目
第一次使用CSDN编辑器,排版不太合理,请大家见谅。
简介
最近跟着同学一起做了一个小项目,是关于实时温度采集的。通过采集温度到数据库mysql,并通过PHP调用,在网页上实时反馈出来。不是相关专业,所以代码差强人意,欢迎留言讨论。
代码部分
网站根目录下
前三个是你需要新建的三个文件,后面两个.js文件可以在对应官网下载或搜索下载。5个文件一同放在网站根目录下。我是用的是PHPstudy集成软件搭建的网站环境,使用宝塔面板也可以。
代码片
1.新建名为 index.php
的文件(index是网站默认访问的文件)
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="echarts.min.js"></script>
<script src="jquery.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {
};
var data1=0;
var data2;
var date=new Date();
function getdata()
{
$.getJSON('./getData.php', function (data0) {
data1=data0['data'];})
return(data1);
}
/*function getdate()
{
$.getJSON('./getData.php', function (data0) {data2=data0['DATE_TIME'];})
return (data2);
}*/
option = null;
option = {
title: {
text: '演示动画',
left:'center',
top:40,
textStyle:{
color:'#333',
fontStyle:'oblique',
fontSize:40
}
},
tooltip : {
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
feature: {
restore: {
},
saveAsImage: {
}
}
},
series: [
{
name: '',
min:25,
max:45,
splitNumber: 10,
type: 'gauge',
detail: {
formatter:'{value}℃'},
data: [{
value: 0, name: 'X X