***百度统计图表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 ...
随机推荐
- Effiective C++ (一)
最近在看Effective C++ ,同时将总结一下里边的重要知识点: ########################## module 1 #################### ...
- Oracle Imp and Exp (导入和导出) 数据 工具使用
Oracle 提供两个工具imp.exe 和exp.exe分别用于导入和导出数据.这两个工具位于Oracle_home/bin目录下. 导入数据exp 1 将数据库ATSTestDB完全导出,用户名s ...
- golang:interface{}类型测试
在golang中空的interface即interface{}可以看作任意类型, 即C中的void *. 对interface{}进行类型测试有2种语法: 1. Comma-ok断言: value, ...
- 【EF Code First】Migrations数据库迁移
1,打开工具->NuGet程序管理器->程序包管理器控制台 默认项目中要选择 数据访问上下文类 所在的项目 我的DB是在命名空间CodeFirst.UI下的所以选择CodeFirst. ...
- centos6.3编译安装Apache2.4.3+PHP5.4.8+Mysql5.5.8
以虚拟机VirtualBox 版本是4.1.20(内存设置为512M,centos安装是文本模式下安装),全新以最小化包安装了32位的 CentOS6.3系统,作为本地web环境,上次讲了在windo ...
- VS2010出现灾难性错误的解决办法
VS2010出现灾难性错误的解决办法 之前本人利用VS2010 在编写一个基于对话框的程序的时候,要在对话框类C-.DLG中添加函数,右键点击类向导,此时界面上弹出一个消息框,告知出现灾难性事故, ...
- zabbix语言设置
1.怎样支持中文: https://www.zabbix.org/wiki/How_to/install_locale 官方解决方法 实际操作中,进入/var/lib/locales/supporte ...
- expect脚本
#!/bin/bash # Filename: main.sh usage(){ echo "scp file :./main.sh scp sourcefile destfile" ...
- 一些常用到的Centos命令
CentOS常用命令在我们的使用中,经常被使用.所以,我们对一些经常使用又很重要的CentOS常用命令进行了全面的整理.下面,就来介绍这些CentOS常用命令. 一:使用CentOS常用命令查看cpu ...
- HDU 5638 拓扑排序+优先队列
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5638 题意: 给你一个DAG图,删除k条边,使得能个得到字典序尽可能小的拓扑排序 题解: 把拓扑排序 ...