Thinkphp 與Echarts-php 使用 頂 原

這裏推薦大家使用composer 依賴管理工具 導入Echarts-php庫 

 {
        "name": "hisune/echarts-php",
        "version": "1.0.10",
        "version_normalized": "1.0.10.0",
        "source": {
            "type": "git",
            "url": "https://github.com/hisune/Echarts-PHP.git",
            "reference": "46f3f3b689eb737ab4c0e85e615466234ae78ddd"
        },
        "dist": {
            "type": "zip",
            "url": "https://files.phpcomposer.com/files/hisune/Echarts-PHP/46f3f3b689eb737ab4c0e85e615466234ae78ddd.zip",
            "reference": "46f3f3b689eb737ab4c0e85e615466234ae78ddd",
            "shasum": ""
        },
        "require": {
            "php": ">=5.3.0"
        },
        "time": "2017-03-31T06:44:15+00:00",
        "type": "library",
        "installation-source": "dist",
        "autoload": {
            "psr-4": {
                "Hisune\\EchartsPHP\\": "src/"
            }
        },
        "notification-url": "https://packagist.org/downloads/",
        "license": [
            "MIT"
        ],
        "authors": [
            {
                "name": "Hisune",
                "email": "[email protected]",
                "homepage": "http://hisune.com",
                "role": "Developer"
            }
        ],
        "description": "A php wrapper for echarts javascript libraries",
        "homepage": "http://hisune.com",
        "keywords": [
            "charts",
            "echarts",
            "javascript",
            "php"
        ]
    }

 

引入Echarts-php庫

這裏我只用到Echarts和YAxix 

require 'vendor/autoload.php';
use Hisune\EchartsPHP\ECharts;
use Hisune\EchartsPHP\Doc\IDE\YAxis;   

 

這裏我寫了一個通用的圖表方法

裏面的參數 就不一一介紹大家可以去官網瞭解

http://echarts.baidu.com/tutorial.html

Model總定義Search_General方法

public function Search_General($text,$color,$legend,$Xdata,$axisLabel,$SeriesData,$id){
        $echart = new Echarts();
        $echart->title=array(
          "left"=>'left',
          "text"=>$text
          ); 
        $echart->color=$color;
        $echart->tooltip=array(
          "trigger"=>'axis',
          "axisPointer"=>array("animation"=>false), 
          );
        
        $echart->legend=$legend;
        $echart->grid=array(
          "left"=>'2%',
          "right"=>'4%',
          "bottom"=>'10%',
          "containLabel"=>true
          );
        $echart->dataZoom=array(
          array(
            "type"=>'inside', 
            "start"=>70,
            "end"=>100,
            "xAxisIndex"=>0
            )
          ); 
        $echart->xAxis=array(
          "type"=>'category',
          "boundaryGap"=>false,
          "data"=>$Xdata
          );  
        $yAxis = new YAxis();
        $yAxis->type="value"; 
        $yAxis->axisLabel = $axisLabel;
        $echart->addYAxis($yAxis); 
        $echart->series=$SeriesData ;
        return $echart->render($id); 
      }

這裏主要介紹一下幾個參數

return $echart->render($id); 

render中的id就是頁面div中定義的id

<div id="echarts-id" class="chart chart-lg"></div>

dataZoom區域縮放組件

start數據開始顯示的位置

end截至

同樣dataZoom也可以同時X Y軸同時區域縮放

這裏有列子

http://echarts.baidu.com/option.html#dataZoom

$echart->dataZoom=array(
          array(
            "type"=>'inside', 
            "start"=>70,
            "end"=>100,
            "xAxisIndex"=>0
            )
          ); 

 

//

Events-Received-Rate 是我傳的id名字

這裏注意個一個小地方，legend 總的data值 和servies name是同樣的，不然會顯示不出來

Controller中調用Echarts 訪問Search_General 傳參

$times = array('2017-08-14','2017-08-15','2017-08-16','2017-08-17','2017-08-18');
$Events_Received_Rate = array(113,456,34,78,343);
$color1 = array('#E8488B');  //折線圖  線顏色
$axisLabel1 = array("formatter"=>'{value}/s'); //單位/s
$legend1 = array(
"data"=>array('Events Received Rate'),
         "left"=>20,
         'bottom'=>18
        );  // 控制折線圖顯示隱藏按鈕  left  bottom 調動顯示位置
$series1=array( 
       "name"=>"Events Received Rate",
       "type"=>"line",
       "data"=>$Events_Received_Rate   //Y軸數據
       );
$Received_Rate =  D('Echarts')->Search_General("Events Received Rate(/s)",$color1,$legend1,$times,$axisLabel1,$series1,"Events-Received-Rate"); 

通過ajax 傳到頁面顯示

$this -> ajaxReturn($Received_Rate );

定義一個div

<div class="col-xs-6" style="height: 400px;"  id="Events_Received_Rate"></div> 

初始化的訪問

$(function() {    
    querySearch();
}); 

function querySearch() {        
    $.ajax({  
        type : "post", 
        url : "/index.php/Home/Echarts/index",  
        dataType:'json',
        success : function(data){     
            $('#Events_Received_Rate').html(data);  
        } 
    }); 
}