频道栏目
首页 > 资讯 > HTML/CSS > 正文

echarts动态报表

17-07-14        来源:[db:作者]  
收藏   我要投稿

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

效果如图:

动态数据图

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用法注意。

相关TAG标签
上一篇:浅谈JavaScript之DOM
下一篇:sql中的concat()函数及JAVA时间类在Hibernate中的映射
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站