背景：
十年前，自学过ASP，一知半解，现在在一家公司从事行政+IT管理（网络，桌面运维），发现公司一百号多号人的公司，依然使用传统的EXCEL 表格处理数据，经常找到我说服务器不行，服务上的EXCEL 总是提示只读，实际上没有人打开，同时这样的EXCEL 数据共享，安全存在严重安全隐患，实在看不下去了。
国庆这几天，尝试自学PHP为他们解决以上问题，也是为了自己，既然沉迷上了 ，经过几天的学习，走过很多弯路，吃了很多苦头，有时候一个问题解决不了几天睡不着的程度，我发现网上很多代码因为版本问题不能使用，特别是在数据库连接方面，原因是没有注明PHP,和MYSQL 版本，WEB 服务搭建等。影响我们这些小白学习的激情，现在把PHP学习总结如下，希望能帮到大家：
实验目的：
该篇为实现PHP、HTML、MySQL、JavaScript（Ajax）、Echarts交互，利用PHP从MySQL中取出数据，利用Ajax响应，通过Echarts绘图，并在HTML上显示的功能而写作。
代码主体分为三部分，包括MYSQL 数据库连接，PHP部分及HTML部分，其中每个部分可根据自己的需要进行补充。
本次实验效果如下：
一、基本信息
操作系统 ：windows10+谷歌浏览器
PHP 版本：7.9.1，MYSQL：5.7.26，WEB 服务器：小皮PHPSTUDY_PRO 8.1
表名：chart
数据预览
二、数据库连接
2.1 创建数据库连接代码数组， function_case.php，代码如下 ：
<?php
function connetct($conf=[])//将$conf[] 数组的值传递给自定义函数CONNETCT()，组成完整的数据库连接代码;
{
$link_code=mysqli_connect($conf['host'],$conf['user'],$conf['pass']); //$link 数据库连接相关取值在config.php 文件中的数据组中取出。
$link_code or die("连接数据库失败，请检查服务器名称、用户名、密码是否有误");// 连接失败返回中止终止程序，并输出自定义“连接数据库失败”。
mysqli_set_charset($link_code,"utf8");//设置字体集为UTF-8 防止乱码。
//选择数据库名称
if(mysqli_select_db($link_code,$conf["db"]))
{
return $link_code;
}
else{
die("数据库名称连接失败");
}
}
?>2.2 配置数据库基本信息，config_case.php，代码如下：
<?php
//返回一个数组。
return[
"host"=>"localhost",//服务器名称
"user"=>"root", //用户名
"pass"=>"root",//密码
"db"=>"db_tct",//数据库
"prot"=>3306 //端口号，MYSQL默认3306
];
?>三、创建Echarts 应用代码
1、读取数据库后的内容经过处理，成为json 能识别的代码，给JS 调用，创建文件：System.php，代码如下：
<?php
$arr=require"../php/config_case.php";
//调用funcion.php 中的数据库连接自定义connect（）函数。
include"../php/function_case.php";
//将$arr数组数据传递给数据库连接函数connect（），以实现数据连接代码$link;
$link=connetct($arr);
if (!$link)
{
exit('error('.mysqli_connect_errno.'):'.mysqli_connect_error);//不继续向下执行
//die
}
mysqli_set_charset($link, "utf8mb4"); //设置数据库编码，避免提取数据时无法读取。
//mysqli_query($conn,"set names 'utf8'"); //数据库输出编码
$sql = "SELECT * FROM chart"; //TableName:选择的数据库中表的名称。
$result = mysqli_query($link,$sql); //读取表中数据。
//var_dump($result);
$data = array(); //设置$data为数组，用于存储从表中读取的数据。
class System{ //假设该表中有三个字段，该类的创建用于放置这三个字段的内容。
public $date; //放置日期；
public $a; //放置字段1；
public $b; //放置字段2；
}
while($row = mysqli_fetch_array($result)){ //循环，依次读取$result中每一行数据。
//var_dump($row);
$alter = new System(); //创建System中的对象，具有放置三个字段的能力。
$alter -> date = $row['Date']; //读取日期值；
$alter -> a = $row['ar1']; //读取字段1值；
$alter -> b = $row['ar2']; //读取字段2值；
$data[] = $alter; //用数组$data存储结果；
}
$BD = json_encode($data); //响应HTML中的ajax部分；
echo $BD;
exit();
?>
到这里，直接浏览器预览system.php ，显示格式正确如下：
[{"date":"2021-10-21","a":"100","b":"1000"},{"date":"2021-10-22","a":"300","b":"2000"},{"date":"2021-10-23","a":"50","b":"3000"},{"date":"2021-10-24","a":"400","b":"4000"},{"date":"2021-10-25","a":"500","b":"5000"},{"date":"2021-10-26","a":"600","b":"6000"},{"date":"2021-10-27","a":"700","b":"7000"}]
echo $BD; 就是输出以上的结果 ，也可以在同样的位置添加一句：var_dump($BD)调试，得出以上输出结果。
2、创建HTML文件，用于前端呈现，index.html，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--设置字符编码，避免乱码或切换网页时出现源代码-->
<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script> <!--引入Echarts库，可通过网址在线引入-->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!--引入jquery，用于设置ajax联系PHP部分的数组-->
</head>
<!-------------------------------------------------------------------------------------------------->
<link rel = "stylesheet" type = "text/css" href = "YourCSSFileName.css"/> <!--CSS文件用于修饰HTML页面-->
<!-------------------------------------------------------------------------------------------------->
<body background="../images/bg.jpg"> <!--背景图片-->
<div id = "container" style = "width:1000px;height:400px;background:#fff"></div> <!--设置Echarts画图容器，赋予宽、高、背景颜色等属性-->
<!-------------------------------------------------------------------------------------------------->
<script type = "text/javascript"> <!--JavaScript标签，用于Ajax联系与Echarts图表属性设置-->
var mychart = echarts.init(document.getElementById("container")); <!--引入Echarts变量-->
var arr1 = [], arr2 = [], arr3 = []; <!--引入三种数组分别用于存储Ajax联系的PHP部分中的$data部分的数据-->
function getusers(){ <!--设置Ajax联系函数-->
$.ajax({ <!--设置Ajax联系-->
type:"post", <!--设置“post”方法-->
async:false, <!--设置同步或异步传输-->
url:"System.php", <!--设置PHP路径-->
data:{}, <!--设置数据-->
dataType:'json', <!--设置数据类型为json-->
success:function(result){ <!--设置传输成功函数-->
console.log(result); <!--调试json的内容，并将其传输至页面上
if(result){ <!--读取由PHP部分的json_encode通过Ajax响应的数据-->
for(var i = 0;i < result.length;i++){ <!--循环读取各字段存储数据-->
arr1.push(result[i].date); <!--获取date对应的数据并存储至arr1中-->
arr2.push(result[i].a); <!--获取a对应的数据并存储至arr2中-->
arr3.push(result[i].b); <!--获取b对应的数据并存储至arr3中-->
}
}
}, <!--语句结束后别忘了加逗号-->
error:function(errmsg){ <!--显示Ajax连接错误的情况-->
alert("Ajax获取服务器数据出错了！" + errmsg); <!--输出结果以显示错误情况-->
}
});
return arr1,arr2,arr3; <!--返回三个数组存储的数据-->
}
getusers(); <!--调用函数，应用Ajax响应-->
<!---------------------------------------------------------------------------------->
<!--设置Echarts图表属性，下图为平滑折线图，具体实例见网址：https://echarts.apache.org/examples/zh/index.html，点开实例有相应代码-->
var option = { <!--设置图表属性-->
tooltip : { <!--显示鼠标滑过图表时的显示框-->
trigger: 'axis',
axisPointer: {
type: 'cross', <!--设置交叉显示框-->
label: {
backgroundColor: '#6a7985' <!--设置背景颜色-->
}
}
},
title:{ <!--设置图表标题-->
text:"案件状态表", <!--图表标题-->
x: 'center', <!--设置图表标题位置-->
y: '7px', <!--设置图表标题垂直偏移量-->
textStyle: { <!--设置字体属性-->
color: '#000000', <!--设置字体颜色-->
fontSize: 20 <!--设置字体大小-->
}
},
xAxis: { <!--设置X轴属性-->
type: 'category',
data: arr1, <!--设置X轴数据-->
axisLabel: { <!--设置X轴属性-->
color: '#000000', <!--设置坐标轴字体颜色-->
fontSize: 20 <!--设置坐标轴字体大小-->
},
splitLine: { <!--设置垂直X轴网格线属性-->
show: true, <!--是否显示网格线选项-->
lineStyle:{ <!--设置网格线线条属性-->
color: ['#EDEDED'], <!--设置网格线颜色属性-->
width: 3, <!--宽度-->
type: 'solid' <!--类型-->
}
},
axisTick: { <!--设置坐标轴刻度-->
inside: true <!--设置刻度位于内或外-->
},
}, <!--语句、每一项属性最好都要加上逗号>
yAxis: {
type: 'value',
axisLabel: {
color: '#000000',
fontSize: 20
},
splitLine: {
show: true,
lineStyle:{
color: ['#EDEDED'],
width: 3,
type: 'solid'
}
},
axisTick: {
inside: true
},
},
series: [ <!--设置数据系列-->
{
data: arr2,
type: 'line',
smooth: true, <!--设置是否平滑属性-->
}
]
};
<!---------------------------------------------------------------------------------->
mychart.setOption(option); <!--设置并运行option-->
<!---------------------------------------------------------------------------------->
</script>
</body>
</html>echarts 的两个文件echarts.min.js、jquery.min.js，自行下载，方便离线使用
下载地址：
https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js
http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js
三、建议学习 var_dump($变量名) 的使用，如var_dump($link), var_dump($sql)等，我主要用于数据库连接后 select 查询代码输出的结果调试，调试前，记录先把跳转代码给注释，逐步调试，再看呈现的数据是不是自己要的结果，因为新手，理解 mysqli_fetch_array ，mysqli_fetch_row，mysqli_fetch_ASSOC 有点困难。
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
