echarts+php+mysql 繪圖實例
最近在學習php+mysql，因為之前畫圖表都是直接在echart的實例demo中修改數據，便想著兩相結合練習一下，通過ajax調用后臺數據畫圖表。
我使用的是echart3，相比較第二版，echarts3體積上減少了200k，適配了移動端，且不再按照需求引入不同的包，直接用echarts.init方法初始化就ok。更簡潔更強大，國產良心產品。
第一步：搭建環境
我使用XAMPP軟件包作為開發平臺，這個可以直接百度下載，一直next安裝好。開啟Apache和MySql。
在mysql中創建一個數據庫，我使用了Navicat for mysql來進行數據庫管理。下載及使用方法參考 ： 百度經驗
這是我建好的測試表：
第二步：php鏈接數據庫并處理數據
<?php
$mysql_server_name='localhost'; //改成自己的mysql數據庫服務器
$mysql_username='root'; //改成自己的mysql數據庫用戶名
$mysql_password=''; //改成自己的mysql數據庫密碼,初始默認密碼為空
$mysql_database='study'; //改成自己的mysql數據庫名
?>
可以把這個php文件保存為db_config.php，以后再進行數據庫鏈接就直接require("db_config.php")就ok。
接下來，創建另一個php文件，處理數據：
<?php
require("db_config.php");
$conn=mysql_connect($mysql_server_name,$mysql_username,$mysql_password) or die("error connecting") ;
mysql_query("set names 'utf8'"); //數據庫輸出編碼
mysql_select_db($mysql_database); //打開數據庫
$result = mysql_query("select * from study");
$data="";
$array= array();
class User{
public $name;
public $age;
}
while($row = mysql_fetch_array($result,MYSQL_ASSOC)){
$user=new User();
$user->name = $row['name'];
$user->age = $row['age'];
$array[]=$user;
}
$data=json_encode($array);
// echo "{".'"user"'.":".$data."}";
echo $data;
?>
這兩個php文件都要放在..\xampp\htdecs下，在瀏覽器打開： http://localhost/test1.php
可以看到已經處理好的json數組：
[{"name":"\u767d\u96e8\u83f2","age":"40"},{"name":"\u5f20\u5929\u5f3a","age":"42"},{"name":"\u51af\u5176\u5eb8","age":"21"},{"name":"\u9a6c\u6b65\u5ddd","age":"18"},{"name":"\u6d2a\u521a","age":"100"},{"name":"\u5218\u4e09\u96cd","age":"21"},{"name":"\u9f50\u4e00\u9e23","age":"85"},{"name":"\u738b\u660e","age":"21"}]
name的值是php將中文轉成unicode編碼，前端調用的時候會自動轉成中文。
第三步：前端通過ajax調用數據并繪圖
怎么調用echarts我就不贅述了，可以直接去echart官網學習查看，基本沒什么學習成本，寫幾個demo就會愛上她的。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="js/echarts.min.js"></script>
<script src="js/jquery.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="height:400px"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['age']
},
xAxis : [
{
type : 'category',
data : (function(){
var arr=[];
$.ajax({
type : "post",
async : false, //同步執行
url : "test1.php",
data : {},
dataType : "json", //返回數據形式為json
success : function(result) {
if (result) {
console.log(result);
for(var i=0;i<result.length;i++){
console.log(result[i].name);
arr.push(result[i].name);
}
}
},
error : function(errorMsg) {
alert("sorry，請求數據失敗");
myChart.hideLoading();
}
})
return arr;
})()
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"age",
"type":"bar",
"data":(function(){
var arr=[];
$.ajax({
type : "post",
async : false, //同步執行
url : "test1.php",
data : {},
dataType : "json", //返回數據形式為json
success : function(result) {
if (result) {
for(var i=0;i<result.length;i++){
console.log(result[i].age);
arr.push(result[i].age);
}
}
},
error : function(errorMsg) {
alert("sorry，請求數據失敗");
myChart.hideLoading();
}
})
return arr;
})()
}
]
};
// 為echarts對象加載數據
myChart.setOption(option);
// }
</script>
</body>
我覺得里面最重要的就是對json數組的循環，將同屬性的值創建成新的數組，然后return給對應坐標軸的data，具體的可以參考我的上一篇博客。
至此，對前后端的交互過程有了簡單清晰的認識。之前一直覺得是洪水猛獸的數據庫操作起來也沒有很難。
來自：http://www.cnblogs.com/qjqcs/p/5852958.html
本文由用戶 ElaJoslyn 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！