Thinkphp 与Echarts-php 使用

2019独角兽企业重金招聘Python工程师标准>>>

这里推荐大家使用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": "hi@hisune.com",
                "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);  
        } 
    }); 
}

转载于:https://my.oschina.net/zqouba/blog/1509955