PHP+MYSQL 可视化Echarts 完整源码，小白总结

背景：

十年前，自学过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，代码如下 ：

      2.2 配置数据库基本信息，config_case.php，代码如下：

"localhost",//服务器名称"user"=>"root",  //用户名"pass"=>"root",//密码"db"=>"db_tct",//数据库"prot"=>3306  //端口号，MYSQL默认3306];?>

三、创建Echarts 应用代码

 1、读取数据库后的内容经过处理，成为json 能识别的代码，给JS 调用，创建文件：System.php，代码如下：

 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)调试，得出以上输出结果。

创建HTML文件，用于前端呈现，index.html，代码如下：

                                               
来源地址：https://blog.csdn.net/weixin_30219751/article/details/127186199