实现PHP HTML MySQL JavaScript(Ajax)与Echarts交互制作图表并显示于网页上的功能
1 任务目的
该篇为实现PHP、HTML、MySQL、JavaScript（Ajax）、Echarts交互，利用PHP从MySQL中取出数据，利用Ajax响应，通过Echarts绘图，并在HTML上显示的功能而写作。
代码主体分为两部分，包括PHP部分及HTML部分，其中每个部分可根据自己的需要进行补充。
注明：“---------”用于分块，以便更加直观的显示代码成分，并非表示注释或有其他含义。
代码运行于WampServer搭建的系统上，需实时连接数据库。
2 主体代码
2.1 PHP部分
<?php
header("charset=UTF-8"); //设置字符编码，避免切换网站时出现乱码。
$con = mysqli_connect("localhost", "$YourUserName", "$YourPassword", "$YourDataBase"); //$YourUserName:用户名; $YourPassword:密码; $YourDataBase:选择的数据库.
mysqli_set_charset($con, "utf8mb4"); //设置数据库编码，避免提取数据时无法读取。
$sql = "SELECT * FROM TableName"; //TableName:选择的数据库中表的名称。
$result = mysqli_query($con, $sql); //读取表中数据。
$data = array(); //设置$data为数组，用于存储从表中读取的数据。
------------------------------------------------------------------------------------------------------------------------
class System{ //假设该表中有三个字段，该类的创建用于放置这三个字段的内容。
public $date; //放置日期；
public $a; //放置字段1；
public $b; //放置字段2；
}
while($row = mysqli_fetch_array($result)){ //循环，依次读取$result中每一行数据。
$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();
?>
2.2 HTML部分
---------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------
3 结果及讨论
3.1 步骤及功能
（1）PHP的日期字段读取MySQL数据；
（2）MySQL数据联系Ajax传输至JavaScript中；
（3）Echarts绘图库的引入，绘制字段变量随时间（日期）变化的平滑折线图；
3.2 实现结果截图
注：使图像中出现多条线，可通过增加Series中“{}”数据序列完成，但要保证序列的长度与时间长度一致。