文档章节

Thinkphp 与Echarts-php 使用

强子啊
 强子啊
发布于 2017/08/14 16:32
字数 582
阅读 186
收藏 0

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

© 著作权归作者所有

强子啊
粉丝 16
博文 16
码字总数 15012
作品 0
长沙
高级程序员
私信 提问
「ThinkPHP开发者周刊」第4期——日志、调试和通知

[ 本周读数 ] ——官方扩展数量已经超过个 ThinkPHP版本开始,官方的扩展全部通过安装,目前官方维护以及参与的扩展已经超过36个,并且都已经支持最新的版本,涵盖和满足了主流的现代化开发需...

流年
2018/11/05
0
0
2013 年国产开源软件 10 大年度热门项目

2013 年结束了,我们根据过去一年的用户访问、交流分享和项目本身的更新频度等诸多角度对收录于开源中国的近三万款开源软件进行统计,从而得出前 10 名最受欢迎的开源软件,仅供参考。 本排行...

oschina
2014/01/02
26.2K
82
2014 年度 Git@OSC 最热门的 50 个项目

2013年5月份开源中国正式推出 Git 代码托管系统 (git.oschina.net) ,经过一年多的发展,Git@OSC 现在已经是国内最大的基于 Git 的代码托管系统。2014年11月,为了满足 Git 仓库不断增长的要...

oschina
2015/01/13
22.8K
97
php开发笔记-windows-linux-thinkphp开发环境搭建

文章来自我的博客:https://www.lwxshow.com/dev/php/thinkphp-configuration-environment.html 使用最新版本的3.1.3版本 php开发笔记-windows-thinkphp开发环境搭建 1.下载ThinkPHP框架 http...

卢卫湘
2013/06/09
0
0
Thinkphp 3.1.2 视频教程震撼上线

期待已久的TP视频教程,经千呼、历万唤,经由TP团队和Lamp兄弟连联合精心制作,正式隆重登场了,这里有最专业的导师,这里有最权威的TP知识,这里有最强大的TP技术团队,在这里,就让我们通过...

麦当苗儿
2013/04/25
4.9K
30

没有更多内容

加载失败,请刷新页面

加载更多

以太坊私有链搭建

https://blog.csdn.net/Blockchain_lemon/article/details/80589123

Moks角木
39分钟前
1
0
自律给我自信-为什么要自律

为什么要自律 混一天和努力一天 看不到任何差别 3天看不到任何变化 7天也看不到任何效果 但是 1个月后, 会看到话题不同 3个月后, 会看到气场不同 6个月后, 会看到距离不同 3年后, 会看到...

周大壮
39分钟前
1
0
读书replay计划说明

突然脑袋一闪,我有了这样一个主意:通过写博客的方式,将我阅读的书中的内容replay出来。 我一般会找着我感兴趣的书去读,一般也会读书中我感兴趣的章节,或者当下对我有用的章节,所以这个...

wanxiangming
41分钟前
0
0
CentOS7安装xrdp环境可实现远程桌面访问

CentOS7安装xrdp环境可实现远程桌面访问 2018-07-14 06:39:28 分类:运维 阅读(2051) 评论(0) 在"Ubuntu系统安装xrdp桌面客户端及实现远程连接桌面"文章中有分享过在Ubuntu系统中安装XRDP环境...

linjin200
今天
5
0
ConfigurationProperties

package cn.enjoy.config; import org.springframework.boot.context.properties.ConfigurationProperties; import org.springframework.stereotype.Component; @ConfigurationProperties(pr......

少年已不再年少
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部