echarts數據自我定製(一)

有沒有發現echarts官網上面的數據都是直接顯示定義在js裏面的呢?如果要自己定製,該怎麼辦?下面就讓倫家爲你揭曉:

php+myssql+echarts展示靜態動態圖

提前準備好數據庫,數據表以及存儲的數據,我用的是phpmyadmin,非常easy,秒建成功哦~~

文件包括:

invoke.php,TestDB.php,AjaxService.php,xxx.html

使用方法:將這幾個文件放在你apache服務器的www目錄下,然後瀏覽器輸入127.0.0.1/xxx.html,你懂得i_f01.gif

以下是詳細介紹:

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);
}
?>


哇,字數要爆棚了,下一個講具體的圖形定製吧。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章