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部分
<!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/YourBackgroundImage.jpg"> <!--背景圖片-->
<div id = "container" style = "width:100%;height:900px;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: 35 <!--設置字體大小-->
}
},
xAxis: { <!--設置X軸屬性-->
type: 'category',
data: arr1, <!--設置X軸數據-->
axisLabel: { <!--設置X軸屬性-->
color: '#000000', <!--設置坐標軸字體顏色-->
fontSize: 35 <!--設置坐標軸字體大小-->
},
splitLine: { <!--設置垂直X軸網格線屬性-->
show: true, <!--是否顯示網格線選項-->
lineStyle:{ <!--設置網格線線條屬性-->
color: ['#EDEDED'], <!--設置網格線顏色屬性-->
width: 3, <!--寬度-->
type: 'solid' <!--類型-->
}
},
axisTick: { <!--設置坐標軸刻度-->
inside: true <!--設置刻度位於內或外-->
},
}, <!--語句、每一項屬性最好都要加上逗號>
yAxis: {
type: 'value',
axisLabel: {
color: '#000000',
fontSize: 35
},
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>
3 結果及討論
3.1 步驟及功能
（1）PHP的日期字段讀取MySQL數據；
（2）MySQL數據聯系Ajax傳輸至JavaScript中；
（3）Echarts繪圖庫的引入，繪制字段變量隨時間（日期）變化的平滑折線圖；
3.2 實現結果截圖
注：使圖像中出現多條線，可通過增加Series中“{}”數據序列完成，但要保證序列的長度與時間長度一致。