zoukankan      html  css  js  c++  java
  • php 生成饼状图,折线图,条形图 通用类

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

  • 相关阅读:
    C#获取Word文档页数,并跳转到指定的页面获取页面信息
    GC 垃圾回收
    Open Flash Chart 之线图
    Open Flash Chart 之线图(二)
    Nullable可空类型
    System.AppDomain类
    C# 事件
    C#方法的参数 Ref Out Params 4种类型的参数
    单向链表
    C# 结构体 struct
  • 原文地址:https://www.cnblogs.com/luoyangcn/p/4712544.html
Copyright © 2011-2022 走看看