文档章节

百度统计图表echart的php类,支持柱形图、线形图、饼形图

zuiw
 zuiw
发布于 2017/06/18 22:30
字数 779
阅读 68
收藏 0
/**
 * 百度数据统计图表echart的PHP实现类
 * 
 * 原作者: 
 * @author:	chenliujin	<liujin.chen@qq.com> 
 * @since 	2013-12-12 
 *  
 * 修改者:
 * @author:	iamlintao	<http://www.iamlintao.com>
 * @since:	2014-06-25
 * @version:
 * @revision:
 * 
 * 			修改后支持 柱形图(bar)、线形图(line)、饼形图(pie)
 * 
 * @example:
 * 
 * 		HTML代码部分:
 * 			<script src="js/esl.js"></script>
 * 			<body>
				<!-- 线形图、柱形图显示 -->
				<div id="chartArea" style="height:300px;border:1px solid #ccc;padding:10px;"></div>
				<!-- 饼形图显示 -->
				<div id="pieArea" style="height:300px;border:1px solid #ccc;padding:10px;"></div>
			</body>
			
		PHP代码部分:
		
		//  柱形图、线形图模拟数据
		$option = array(
			"legend"=>array("邮件营销","联盟广告","视频广告","直接访问","搜索引擎"),
			"xaxis"=>array("type"=>"category","boundaryGap"=>"true","data"=>array("周一","周二","周三","周四","周五","周六","周日")),		
			"series"=>array(
						array("name"=>"邮件营销","type"=>"bar","stack"=>"总量","data"=>array("120","132","101","134","90","230","210")),					
						array("name"=>"联盟广告","type"=>"bar","stack"=>"总量","data"=>array("220","182","191","234","290","330","310")),				
						array("name"=>"视频广告","type"=>"bar","stack"=>"总量","data"=>array("150","232","201","154","190","330","410")),				
						array("name"=>"直接访问","type"=>"bar","stack"=>"总量","data"=>array("320","332","301","334","390","330","320")),					
						array("name"=>"搜索引擎","type"=>"bar","stack"=>"总量","data"=>array("820","932","901","934","1290","1330","1320")),			
					),
			);

		$ec = new Echarts();
		echo $ec->show('chartArea', $option);	// 显示在指定的dom节点上

		// 饼形图模拟数据
		$optionPie = array(
				"legend"=>array("邮件营销","联盟广告","视频广告","直接访问","搜索引擎"),
				"series"=>array(
						array("name"=>"邮件营销","type"=>"pie","stack"=>"总量",
								"data"=>array(
										array("value"=>"335","name"=>"直接访问"),
										array("value"=>"310","name"=>"邮件营销"),
										array("value"=>"234","name"=>"联盟广告"),
										array("value"=>"135","name"=>"视频广告"),
										array("value"=>"1548","name"=>"搜索引擎"),
								),
						),
				),
		);
		
		$ec = new Echarts();
		echo $ec->show('pieArea', $optionPie);	// 显示在指定的dom节点上
 */

class Echarts{

	 public static function show($id, array $data){
 	
 		$xaxis = "";
 		$series = "";
    		
		if (empty($data)) {        	
			$data = array(
                'legend' => array(
                    'data' => array('-')
                ),
                'xaxis' => array(
                    'type' => 'category',
                    'boundaryGap' => 'false',
                    'data' => array('')
                ),
                'series' => array(
                    array(
                        'name' => '-',
                        'type' => 'line',
                        'itemStyle' => "{normal: {areaStyle: {type: 'default'}}}",
                        'data' => array()
                    ),
                )
            );
        }

		foreach ($data as $key => $value) {
			switch ($key) {
				case 'legend':
					foreach ($value as $k => $v) {
						switch ($k) {
							case 'data':
								$legend = $k . ':' . json_encode($v);
								break;
						}
					}
					break;
					
				case 'xaxis':
					foreach ($value as $k => $v) {
						switch ($k) {
							case 'type':
								$xaxis[] = $k . ":'" . $v . "'";
								break;
							case 'boundaryGap':
								$xaxis[] = $k . ':' . $v;
								break;
							case 'data':
								$xaxis[] = $k . ':' . json_encode($v);
								break;
						}
					}
					$xaxis = '{' . implode(', ', $xaxis) . '}';
					break;
					
				case 'series':
					foreach ($value as $list) {
						$tmp = array();
						foreach ($list as $k => $v) {
							switch ($k) {
								case 'name':
								case 'type':
									$tmp[] = $k . ":'" . $v . "'";
									break;
								case 'itemStyle':
									$tmp[] = $k . ':' . $v;
									break;
								case 'data':
									$tmp[] = $k . ':' . json_encode($v);
							}
						}
						$series[] = '{' . implode(', ', $tmp) . '}';
					}
					$series = implode(', ', $series);
					break;
			}
		}

		$script = <<<eof
            <script type="text/javascript">
            // Step:3 conifg ECharts's path, link to echarts.js from current page.
            // Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径

			// 把所需图表指向单文件
            require.config({
                paths:{
                    echarts:'./js/echarts',
                    'echarts/chart/bar' : './js/echarts',	
                    'echarts/chart/line': './js/echarts',
					'echarts/chart/pie': './js/echarts'
                }
            });

            // Step:4 require echarts and use it in the callback.
            // Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径

			// 按需加载所需图表
            require(
                [
                    'echarts',
                    'echarts/chart/bar',
                    'echarts/chart/line',
 					'echarts/chart/pie'
                ],
                function(ec) {
                    var myChart = ec.init(document.getElementById('$id'));
                    var option = {
                        title : {
                            text: '',
                            subtext: ''
                        },
                        tooltip : {
                            trigger: 'axis'
                        },
                        legend: {
                            $legend
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                mark : true,
                                dataView : {readOnly: false},
                                magicType:['line', 'bar'],
                                restore : true
                            }
                        },
                        calculable : true,
                        xAxis : [$xaxis],
                        yAxis : [{type : 'value'}],
                        series : [$series]
                    };

                    myChart.setOption(option);
                }
            );
            </script>
eof;

		echo $script;
	}
}


附带生成效果图:


© 著作权归作者所有

zuiw
粉丝 15
博文 9
码字总数 5466
作品 0
石景山
程序员
私信 提问
echarts树形图设置连线颜色

请教:echart中的树形图,怎么根据两个节点的关系情况,连线可以设置成不同的颜色?如下图黄色框内的样子。我试过用 lineStyle设置颜色,但是都是全局设置,在data里设置 lineStyle,都没效果...

心灵左手
2016/11/11
2.1K
2
如何让单文件引入后的图表能够在浏览器调整窗口大小时图表也刷新宽度?

@Kener-林峰 你好,想跟你请教个问题: 我根据echart提供的demo,在我的工程中加入了echart(echarts-all.js),但是如何让图表的宽度自动那? echart提供的例子都支持,可是单文件引入后就不...

宋万龙
2014/12/12
1K
2
Echart生成的图如何加载在百度地图上

@Kener-林峰 你好,我想用后台的数据+echart动态生成折线图,然后作为marker加载在百度地图上, 要加载marker是要知道其图片的路径的, 但是我不知道 如何获取echart实时生成的图表的路径?不...

jayjia浅浅
2014/08/09
1K
1
ELK系列二:kibana操作及nginx日志分析图表创建

本文主要介绍kibana4的基本操作,nginx日志分析饼形图、柱形图、客户端地理位置分布图等相关图表创建。 一、kibana基本操作 1.面板介绍 Settings:创建索引 Discover:查询数据,选择左上角的...

hnr1017
2018/07/03
0
0
行者/ECharts-Helper

ECharts-Helper 项目介绍 echart-helper是什么? echart-helper是一款echarts辅助开发插件,能够帮助开发者快速构建echart图表。 安装教程 引入jquery、echarts及echarts.helper三个文件即可...

行者
2018/06/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot + Mybatis-Plus 集成与使用(二)

前言: 本章节介绍MyBatis-Puls的CRUD使用。在开始之前,先简单讲解下上章节关于Spring Boot是如何自动配置MyBatis-Plus。 一、自动配置 当Spring Boot应用从主方法main()启动后,首先加载S...

伴学编程
昨天
7
0
用最通俗的方法讲spring [一] ──── AOP

@[TOC](用最通俗的方法讲spring [一] ──── AOP) 写这个系列的目的(可以跳过不看) 自己写这个系列的目的,是因为自己是个比较笨的人,我曾一度怀疑自己的智商不适合干编程这个行业.因为在我...

小贼贼子
昨天
7
0
Flutter系列之在 macOS 上安装和配置 Flutter 开发环境

本文为Flutter开发环境在macOS下安装全过程: 一、系统配置要求 想要安装并运行 Flutter,你的开发环境需要最低满足以下要求: 操作系统:macOS(64位) 磁盘空间:700 MB(不包含 IDE 或其余...

過愙
昨天
6
0
OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
昨天
2.6K
16
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
昨天
42
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部