***百度统计图表Echarts的php实现类，支持柱形图、线形图、饼形图
/**
* 百度数据统计图表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, JSON_UNESCAPED_UNICODE);
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, JSON_UNESCAPED_UNICODE);
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, JSON_UNESCAPED_UNICODE);
}
}
$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;
}
}
原文地址： 26点的博客（http://www.iamlintao.com/?p=3149）
***百度统计图表Echarts的php实现类，支持柱形图、线形图、饼形图的更多相关文章
- C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计
在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界 ...
- Android开发调试日志工具类[支持保存到SD卡]
直接上代码: package com.example.callstatus; import java.io.File; import java.io.FileWriter; import java.i ...
- 将百度的ECharts整合到阿里的Weex中。
由于公司的业务,之前PC版产品中,大量的使用了百度的ECharts库.所以现在要做移动端,在大概熟悉了Weex基本语法和搭建环境后,就着手研究如何将这两个好东西糅合起来. 首先,按照Weex官方教程, ...
- 大数据时代的图表可视化利器——highcharts,D3和百度的echarts
大数据时代的图表可视化利器——highcharts,D3和百度的echarts https://blog.csdn.net/minidrupal/article/details/42153941 ...
- 支持异步写入的日志类,支持Framework2.0
因为工作需要需要在XP上运行一个C#编写的Winform插件,我就用Framework2.0,因为存在接口交互所以想保留交易过程的入参出参. 考虑到插件本身实施的因素,就没有使用Log4.NLog等成 ...
- vue+echarts实现可拖动节点的折现图（支持拖动方向和上下限的设置）
本篇文档主要是利用echarts实现可拖动节点的折现图,在echarts中找到了一个demo,传送门:https://echarts.baidu.com/examples/editor.html?c= ...
- 百度的echarts报表数据直接显示
最近在使用百度的echarts开发,在使用过程中,遇到点需求,就是希望显示的数据直接在图标上显示,而不是鼠标滑动以后才显示,于是百度搜了下相关的文章正好找到了,然后使用了这个方法是可以用的,所以这里记 ...
- 微信小程序分享支持自定义封面图
微信小程序又发布更新了,刚好昨天支付宝也发布小程序,不能让它抢了风头的节奏.微信小程序主要更新如下:“小程序分享支持自定义封面图,公众号及小程序客服可发送小程序卡片.同时,我们还开放了获取发票抬头,指 ...
- react-native 安卓支持 gif动态图
需要在android/app/build.gradle文件中添加模块 //这一行没有的话得加上才行 compile "com.facebook.fresco:fresco:1.5.0&quo ...
随机推荐
- 最大似然估计（MLE）和最大后验概率（MAP）
最大似然估计: 最大似然估计提供了一种给定观察数据来评估模型参数的方法,即:“模型已定,参数未知”.简单而言,假设我们要统计全国人口的身高,首先假设这个身高服从服从正态分布,但是该分布的均值与方差未知 ...
- poj 1338 Ugly Numbers
原题链接:http://poj.org/problem?id=1338 优先队列的应用,如下: #include<cstdio> #include<cstdlib> #incl ...
- JVM学习总结二——垃圾回收算法
昨天总结了JVM内存分区相关的知识,这次我们将来了解下JVM的另一个核心知识点——垃圾回收算法.这一部分其实并不太难,如果对操作系统的内存处理算法有所了解,那么这部分算法其实只看名字就能明白,两者在原 ...
- 6.Knockout.Js（加载或保存JSON数据）
前言 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地存储需要序列化数据),交换数据最方便的就是使用JSON格式 – 大多数的Ajax应用程 ...
- mysql存储过程执行权限问题
tags: mysql PROCEDURE 存储过程 definer SECURITY 权限 以下存储过程,限定了DEFINER为root,也就是root之外的账户是无法调用这个存储过程的. 1 2 ...
- MYSQL主键存在则更新，不存在则插入的解决方案（ON DUPLICATE KEY UPDATE）
经常我们使用的最简单的数据库操作就是数据的更新,删除和插入,对于批量删除和插入的方法相信大家都很清楚,那么批量更新估计有的人就不知道了,并且还有批量插入,在插入时若有主键冲突则更新的操作,这在EAV模 ...
- database first表更新一个表会更新所有的model，包括添加验证代码，解决办法
因为model类是自动生成的,重新生成后会覆盖自己的修改.一个比较合理做法,就是用 partial class的方式来实现. 比如有一个Model类: Movie.那我们就可以添加一个局部类文件,局部 ...
- MYSQL procedure
没怎么接触过mysql procedure,今天建个calendar表还磨磨唧唧的,记录一下: CREATE PROCEDURE `new_procedure` (start_date DATA,en ...
- My First Django Project (3) - Apache set up
Holy moly!!!!因为漏了一下斜杠,害我反复调试了2,3天,无法读取static 文件,一直找不出原因,后来在apache的error.log中发现了原因. 1. 下载了apache 2.4, ...
- java提供了native2ascii工具
可以使用这个工具,把中文编码称为ascii码 在命令行输入native2ascii 输入中文 得到数据