有沒有發現echarts官網上面的數據都是直接顯示定義在js裏面的呢?如果要自己定製,該怎麼辦?下面就讓倫家爲你揭曉:
php+myssql+echarts展示靜態動態圖
提前準備好數據庫,數據表以及存儲的數據,我用的是phpmyadmin,非常easy,秒建成功哦~~
文件包括:
invoke.php,TestDB.php,AjaxService.php,xxx.html
使用方法:將這幾個文件放在你apache服務器的www目錄下,然後瀏覽器輸入127.0.0.1/xxx.html,你懂得
以下是詳細介紹:
1.invoke.php 數據庫連接等相關事宜
<?php ob_start(); //======================================== function createDB(){ $conn=mysql_connect("localhost","root","123qwe");//親設置的數據庫賬號密碼 mysql_query("set names 'utf8'"); mysql_select_db("plusoft_test",$conn);//親的數據庫 return $conn; } //======================================== $methodName = $_GET["method"]; if($methodName != null){ eval("\$method = ".$methodName.";"); if($method != null) $method(); } function request($name){ $value = $_GET[$name]; if($value == null){ $value = $_POST[$name]; } return $value; } function writeJSON($obj){ if(is_string($obj)) { ob_end_clean(); print_r($obj); }else { $json = json_encode($obj); ob_end_clean(); print_r($json); } } function gbk2utf8($data){ if(is_array($data)){ return array_map('gbk2utf8', $data); } return iconv('gbk','utf-8',$data); } function php_json_decode($str){ $stripStr = stripslashes($str); $json = json_decode($stripStr,true); return $json; } ?>
2.TestDB.php 直接基於數據庫的服務,與具體的數據表打交道,取出數據
<?php require_once('invoke.php'); class TestDB{ //獲取x軸的數據,根據實際需求取類型。有字符串,數值以及日期三種 public function GetXaxisname() { $myconn = createDB(); $sql = "select a.name from xaxis a"; $result=mysql_query($sql,$myconn); $data = array(); while($row=mysql_fetch_array($result)) { array_push($data,$row); } return $data; } public function GetXaxisnum() { $myconn = createDB(); $sql = "select a.num from xaxis a"; $result=mysql_query($sql,$myconn); $data = array(); while($row=mysql_fetch_array($result)) { array_push($data,$row); } return $data; } public function GetXaxisdate() { $myconn = createDB(); $sql = "select a.mydate from xaxis a"; $result=mysql_query($sql,$myconn); $data = array(); while($row=mysql_fetch_array($result)) { array_push($data,$row); } return $data; } //獲取y軸的數據,根據實際需求取類型。有字符串,數值以及日期三種 public function GetYaxisname() { $myconn = createDB(); $sql = "select b.name from yaxis b"; $result=mysql_query($sql,$myconn); $data = array(); while($row=mysql_fetch_array($result)) { array_push($data,$row); } return $data; } public function GetYaxisnum() { $myconn = createDB(); $sql = "select b.num from yaxis b"; $result=mysql_query($sql,$myconn); $data = array(); while($row=mysql_fetch_array($result)) { array_push($data,$row); } return $data; } public function GetYaxisdate() { $myconn = createDB(); $sql = "select b.mydate from yaxis b"; $result=mysql_query($sql,$myconn); $data = array(); while($row=mysql_fetch_array($result)) { array_push($data,$row); } return $data; } //獲取座標的具體數據 public function GetData($id) { $myconn = createDB(); $sql = "select data from chartdata where id = '".$id."'"; $result=mysql_query($sql,$myconn); $data = array(); while($row=mysql_fetch_array($result)) { array_push($data,$row); } return count($data) > 0 ? $data[0] : null; } /* public function GetDev($id){ $myconn = createDB(); $sql = "select * from t_dev where id = '".$id."'"; $result=mysql_query($sql,$myconn); $data = array(); while($row=mysql_fetch_array($result)) { array_push($data,$row); } return count($data) > 0 ? $data[0] : null; } */ //取map的值 public function GetMapData() { $myconn = createDB(); $sql = "select city,value from mapdata"; $result=mysql_query($sql,$myconn); $data = array(); while($row=mysql_fetch_array($result)) { array_push($data,$row); } return $data; } } ?>
3.AjaxService.php 定製的服務,輸出格式化成json數據
<?php require_once('invoke.php'); function GetXaxisname(){ require_once('TestDB.php'); $testDB = new TestDB(); $data = $testDB->GetXaxisname(); $json = json_encode($data); print_r($json); } function GetXaxisnum(){ require_once('TestDB.php'); $testDB = new TestDB(); $data = $testDB->GetXaxisnum(); $json = json_encode($data); print_r($json); } function GetXaxisdate(){ require_once('TestDB.php'); $testDB = new TestDB(); $data = $testDB->GetXaxisdate(); $json = json_encode($data); print_r($json); } function GetYaxisname(){ require_once('TestDB.php'); $testDB = new TestDB(); $data = $testDB->GetYaxisname(); $json = json_encode($data); print_r($json); } function GetYaxisnum(){ require_once('TestDB.php'); $testDB = new TestDB(); $data = $testDB->GetYaxisnum(); $json = json_encode($data); print_r($json); } function GetYaxisdate(){ require_once('TestDB.php'); $testDB = new TestDB(); $data = $testDB->GetYaxisdate(); $json = json_encode($data); print_r($json); } function GetData(){ $id = $_GET["id"]; require_once('TestDB.php'); $testDB = new TestDB(); $data = $testDB->GetData($id); $json = json_encode($data); print_r($json); }; function GetMapData(){ require_once('TestDB.php'); $testDB = new TestDB(); $data = $testDB->GetMapData(); $json = json_encode($data); print_r($json); } //生成一定數量的不重複的隨機數,所以在php方法中就轉換成json格式,這樣方便處理。js不認識這種類型的數據 function RandTest(){ //初始化數據範圍【最小值,最大值】和生成數據的個數 $min=0; $max=100; $num=100; $count=0; $return=array(); while($count < $num) { $return[] = mt_rand($min , $max); $return =array_flip(array_flip($return)); $count = count($return); } shuffle($return);////data=Array ( [0] => 4 [1] => 2 [2] => 10 [3] => 14 [4] => 20 [5] => 16 [6] => 1 ) $json = json_encode($return); print_r($json);//[4,10,12,1,11,17,8] } //生產0到1之間的小數一位 function RandFloat(){ $min=0; $max=1; // $return=rand($min , $max)/10; $return=$min + mt_rand() / mt_getrandmax() * ($max - $min); $json = json_encode($return); print_r($json); } //生產0到20之間的整數一位 function RandANum(){ $min=0; $max=10; // $return=rand($min , $max)/10; $return=mt_rand($min , $max); $json = json_encode($return); print_r($json); } //生產20到40之間的整數一位 function RandANum2(){ $min=20; $max=40; // $return=rand($min , $max)/10; $return=mt_rand($min , $max); $json = json_encode($return); print_r($json); } //生產500到1000之間的整數一位 function RandBigNum(){ $min=500; $max=1000; // $return=rand($min , $max)/10; $return=mt_rand($min , $max); $json = json_encode($return); print_r($json); } ?>
哇,字數要爆棚了,下一個講具體的圖形定製吧。