/**
* 百度數據統計圖表echart的PHP實現類
*
* 原作者：
* @author: chenliujin <[email protected]>
* @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;
}
}