最近在學習資料可視化，用ecahrts的執行個體demo修改資料不具有普适性，是以想着通過ajax調用mysql的背景資料畫圖表，也便于日後維護。
第一步：搭建環境
推薦使用XMAPP軟體包作為開發平台，開啟Apache和MySql，如果本地已經有課mysql，要注意端口的占用。
xmapp.png
第二步：navicat管理資料庫
使用navicat進行資料庫管理，它是mysql的直覺化的圖形使用者界面，非常友善，首先連結管理資料庫：
navicat.png
使用者名密碼根據自己實際情況設定。
然後我們建立一個測試表，比如我建立了一個study庫，并且在study庫中建立了一個study表。
mysql.png。
第三步：PHP連接配接資料庫并且處理資料
第一個php檔案連接配接資料庫，我儲存為sql_config.php,以後在進行資料庫連結就直接require就可以。
$mysql_server_name='localhost'; //mysql資料庫伺服器
$mysql_username='root'; //mysql資料庫使用者名
$mysql_password=''; //mysql資料庫密碼,初始預設密碼為空
$mysql_database='study'; //mysql資料庫名
?>
接下來，建立另一個php檔案bar.php，處理資料，：
//這部分的功能是讀表資料并且轉為json格式，便于js處理。
require("sql_config.php");
$conn=mysqli_connect($mysql_server_name,$mysql_username,$mysql_password) or die("error connecting");
mysqli_query($conn,"set names 'utf8'"); //資料庫輸出編碼
mysqli_select_db($conn,$mysql_database); //打開資料庫
$result = mysqli_query($conn,"select * from study");//打開你的表
$data="";
$array= array();
class User{
public $name;
public $age;
public $kg;//字段添加處1
}
while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){
$user=new User();
$user->name = $row['name'];
$user->age = $row['age'];
$user->kg = $row['kg'];//字段添加處2
$array[]=$user;
}
$data=json_encode($array);
// echo "{".'"user"'.":".$data."}";
echo $data;
?>
這兩個php檔案都要放在..\xampp\htdecs下，在浏覽器打開：http://localhost/bar.php
可以看到已經處理好的json數組，name的值是php将中文轉成unicode編碼，前端調用的時候會自動轉成中文。
php.png
第四步，利用ajax調用資料并在前端繪圖。
echarts我已經有過介紹，上手很快，此次主要是資料的擷取。
小組的年齡體重統計
var myChart = echarts.init(document.getElementById('bar'));
var arr1=[],arr2=[],arr3=[];
function arrTest(){
//這個功能塊的作用就是讀取json資料。
$.ajax({
type:"post",//請求伺服器載入資料
async:false,//異步屬性
url:"bar.php",
data:{},
dataType:"json",
success:function(result){
if (result) {
for (var i = 0; i < result.length; i++) {
arr1.push(result[i].name);
arr2.push(result[i].age);
arr3.push(result[i].kg); //這邊更新字段，可以隻寫你需要展示的字段。
}
}
}
})
return arr1,arr2,arr3;
}
arrTest();
var option = {
title : {
text: '小組的年齡體重',
subtext: '随便搞搞'},
//Bootstrap 提示工具(Tooltip)插件,滑鼠懸停時候的提示框
tooltip: {
show: true
},
//圖例
legend: {
data:['age','kg']
},
//工具箱
toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
//x軸
xAxis : [
{
type : 'category',
data : arr1
}],
//y軸
yAxis : [
{type : 'value'}
],
//需要展示的系列，根據需要
series : [
{
"name":"age",
"type":"bar",
"data":arr2,
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
"name":"kg",
"type":"bar",
"data":arr3,
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
}
]
};
// 為echarts對象加載資料
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
測試完成之後在位址欄輸入http://你的IP位址/你的檔案名.html，就可以檢視了，比如我的就是http://10.24.89.120/bar.html，頁面展示結果如下：
image.png
至此前背景資料連接配接完成了。