thinkphp使用echarts_Thinkphp 与Echarts-php 使用
這里推薦大家使用composer?依賴管理工具 導(dǎo)入Echarts-php庫(kù)
{
"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庫(kù)
這里我只用到Echarts和YAxix
require 'vendor/autoload.php';
use Hisune\EchartsPHP\ECharts;
use Hisune\EchartsPHP\Doc\IDE\YAxis;
這里我寫了一個(gè)通用的圖表方法
里面的參數(shù) 就不一一介紹大家可以去官網(wǎng)了解
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);
}
這里主要介紹一下幾個(gè)參數(shù)
return $echart->render($id);
render中的id就是頁(yè)面div中定義的id
dataZoom區(qū)域縮放組件
start數(shù)據(jù)開始顯示的位置
end截至
同樣dataZoom也可以同時(shí)X Y軸同時(shí)區(qū)域縮放
這里有列子
$echart->dataZoom=array(
array(
"type"=>'inside',
"start"=>70,
"end"=>100,
"xAxisIndex"=>0
)
);
//
Events-Received-Rate 是我傳的id名字
這里注意個(gè)一個(gè)小地方，legend 總的data值 和servies name是同樣的，不然會(huì)顯示不出來
Controller中調(diào)用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 調(diào)動(dòng)顯示位置
$series1=array(
"name"=>"Events Received Rate",
"type"=>"line",
"data"=>$Events_Received_Rate //Y軸數(shù)據(jù)
);
$Received_Rate = D('Echarts')->Search_General("Events Received Rate(/s)",$color1,$legend1,$times,$axisLabel1,$series1,"Events-Received-Rate");
通過ajax 傳到頁(yè)面顯示
$this -> ajaxReturn($Received_Rate );
定義一個(gè)div
初始化的訪問
$(function() {
querySearch();
});
function querySearch() {
$.ajax({
type : "post",
url : "/index.php/Home/Echarts/index",
dataType:'json',
success : function(data){
$('#Events_Received_Rate').html(data);
}
});
}
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的thinkphp使用echarts_Thinkphp 与Echarts-php 使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2017年平安信用卡优惠 6月份优惠活动
- 下一篇： php获取手机目录,php如何获取手机型