生成饼状图,折线图,条形图通用的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>