这里推荐大家使用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;

這里我写了一个通用的图表方法

里面的参数 就不一一介绍大家可以去官网了解

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

dataZoom区域缩放组件

start数据开始显示的位置

end截至

同样dataZoom也可以同时X Y轴同时区域缩放

这里有列子

$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

初始化的访问

$(function() {

querySearch();

});

function querySearch() {

$.ajax({

type : "post",

url : "/index.php/Home/Echarts/index",

dataType:'json',

success : function(data){

$('#Events_Received_Rate').html(data);

}

});

}