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