這里推薦大家使用composer?依賴管理工具 導(dǎo)入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;

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

里面的參數(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);

}

這里主要介紹一下幾個參數(shù)

return $echart->render($id);

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

dataZoom區(qū)域縮放組件

start數(shù)據(jù)開始顯示的位置

end截至

同樣dataZoom也可以同時X Y軸同時區(qū)域縮放

這里有列子

$echart->dataZoom=array(

array(

"type"=>'inside',

"start"=>70,

"end"=>100,

"xAxisIndex"=>0

)

);

//

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

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

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)動顯示位置

$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 傳到頁面顯示

$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);

}

});

}

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的thinkphp使用echarts_Thinkphp 与Echarts-php 使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。