您现在的位置:首页 >> 前端 >> 内容

echarts动态报表

时间:2017/7/14 16:44:45 点击:

  核心提示:php请求部分```//会员增长数量public function vipInc(){$name=user;$user=M($name);//计算7天会员增长数量for ($i=1,$j=0 ; $i...

php请求部分

```
//会员增长数量
    public function vipInc(){
        $name='user';
        $user=M($name);
        //计算7天会员增长数量
        for ($i=1,$j=0 ; $i < 8; $i++,$j++) {
            $today=strtotime(date('Ymd'));
            $now = $today-86400*($i-1);
            $time = $today-86400*$i;
            $map['create_time']=array('between',array($time,$now));
            $inc_num=$user->where($map)->count();
            $arr1=array("time"=>date('m-d',$time),"number"=>$inc_num);
            //构建二维数组
            $result[]=$arr1;
            $arr1=array();             //清空arr1数组
        }
        $result=array_reverse($result);
        $result=json_encode($result);
        echo ($result);
    }```

前台AJAX请求

-->
    <script type="text/javascript">
            $(document).ready(function(){
                var myCharts2 = echarts.init(document.getElementById("main2"));
                myCharts2.showLoading({ //加载动画
                        text : '正在加载数据。。。。'
                    });
                var times= [];  //时间横轴
                var numbers =[]; //会员增长数量
                $.ajax({
                    type:"post",
                    url:"{:U('Index/vipInc')}",
                    dataType:"json",
                    async : true,            //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行
                    success : function(result) {
                     //请求成功时执行该函数内容,result即为服务器返回的json对象
                     if (result) {
                            var result=eval(result);
                            // var str=JSON.stringify(result);  //把json转换为字符串。显示详细信息,而不是obj。
                            // alert(str);
                        //  for(var i=0;i<result.length;i++){
                        //     for(var j=0;j<result[i].length;j++){
                        //         alert(result[i]);
                        //     }
                           //
                        //    };
                            for(var i=0;i<result.length;i++){
                               times.push(result[i].time);    //挨个取出类别并填入时间数组
                             }
                            for(var i=0;i<result.length;i++){
                                numbers.push(result[i].number);    //挨个取出销量并填入会员数组
                              }
                            myCharts2.hideLoading();    //隐藏加载动画
                            var option={
                                title: {
                                    text: "会员增长数"
                                },
                                tooltip: {
                                    trigger: "axis"
                                },

                                toolbox: {
                                    show: true,
                                    feature: {
                                        dataView: {
                                            show: true,
                                            readOnly: true
                                        },
                                        magicType: {
                                            show: false,
                                            type: ["line", "bar"]
                                        },
                                        restore: {
                                            show: true
                                        },
                                        saveAsImage: {
                                            show: true
                                        }
                                    }
                                },
                                xAxis: [{
                                    type: "category",
                                    boundaryGap: false,
                                    data: times
                                }],
                                yAxis: [{
                                        type: "value",

                                        data: ["0", "10", "20", "30", "40", "50", "60", "70", "80", "90"]
                                    }

                                ],
                                series: [{
                                    name: "会员数量",
                                    type: "line",
                                    data: numbers
                                }]
                            };
                             myCharts2.setOption(option); //绑定数据
                     }

                },
                 error : function(errorMsg) {
                     //请求失败时执行该函数
                 alert("图表请求数据失败!");
                 myCharts2.hideLoading();
                 }
            });
            // 初次加载图表(无数据)
                myCharts2.setOption(option);
        });
    </script>

ps:别忘记引入jq.js和echarts.js

效果如图:

echarts动态报表

1、在php中比较时间大小需要用时间戳。

2、 逆序输出数组 array_reserve()。

3、eval()函数能把json数据转换为数组。

4、JSON.stringify(obj),能把obj对象转换为字符串,在alert(obj)的时候显示具体内容,否则会显示object。

5、数组插入数据$arr[]=x;或者$arr=array('name'=>x);

6、$map用法注意。

Tags:EC CH HA AR 
作者:网络 来源:Wanglas的博客