生成饼状图，折线图，条形图通用的php类，这里使用的是百度 Echart。
Echart 官方网站 http://echarts.baidu.com/
<?php
class Echarts
{ /**
* 返回渲染图表Js代码
* @param $id dom元素id
* @param array $data 图表数据Data
* @param $type 图表类型 饼图： pie 条形图：bar 条形图: line
* @param string $mainTitle 主要标题
* @param string $subTitle 副标题
* @param string $yUnit y轴单位
*@param string $color 颜色 $color="['orange','green','pink']";
* @return string
*/
public static function getEcharts($id, array $data, $type, $mainTitle = '', $subTitle = '', $yUnit = '',$color="")
{
$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':
$legend = '[';
foreach ($value as $k => $v) {
// data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
$legend = $legend . json_encode($v, JSON_UNESCAPED_UNICODE) . ','; }
$legend = $legend . ']';
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 'radius':
case 'type':
$tmp[] = $k . ":'" . $v . "'";
break;
case 'center':
$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;
}
}
if ($type == 'pie') {
$xyAxis = '';
$tooltip="trigger: 'item',formatter: '{a} <br/>{b}:{c} ({d}%)'";
} else {
$xyAxis = 'xAxis :[' . $xaxis . '],';
$xyAxis = $xyAxis . "yAxis : [{type : 'value', axisLabel : {formatter: '{value}$yUnit'}}],";
$tooltip="trigger: 'axis'";
}
if($color!="")
{
$color='color:'.$color.',';
} $script = <<<EOT
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 按需加载所需图表
require(
[
'echarts',
'echarts/chart/bar', //按需加载条形图
'echarts/chart/line', //按需加载折线图
'echarts/chart/funnel',
'echarts/chart/pie', //按需要加载饼图
'echarts/chart/gauge',
'echarts/chart/map',
],
function(ec) {
var myChart = ec.init(document.getElementById('$id'));
var option = {
$color
title : {
text:'$mainTitle',
subtext: '$subTitle',
x:'center'
},
tooltip : {
$tooltip
},
legend: {
orient: 'vertical',
x: 'left',
data: $legend
},
toolbox: {
show : false,
feature : {
mark : false,
dataView: { show: true, readOnly: false },
magicType:['line', 'bar','pie','gauge'],
restore : true
}
},
calculable : true,
$xyAxis
series : [$series]
};
myChart.setOption(option);
}
);
EOT;
return $script;
}
}
如何使用，php后台调用方法
// 饼形图模拟数据
$optionPie = array(
"legend" => array("未参加活动", "参与活动未回答问卷", "参与活动并回答问卷"),
"series" => array(
array(
"name" =>"会员活动详情",
"type" =>"pie",
"radius"=>"50%",
"center"=>"['50%', '50%']",
"data" => $data, //这是一个二维数组
"itemStyle"=>"{normal:{label:{show:true,formatter:'{b}:{c}人 ({d}%)'}},labelLine :{label:{show:true}}}"),
),
);
$ec = new Echarts();
$result = $ec->getEcharts('pieArea', $optionPie, 'pie', '杜比广州上海活动2情况统计图'); // 显示在指定的dom节点上 //返回的是js脚本
return $result;
就这样调用就可以在前台显示统计图了。
对了在前台页面还要添加echarts引用，已经Jquery引用
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>