echarts+php ajax异步统计人数

来源：互联网发布：java可以编写木马编辑：程序博客网时间：2024/06/03 16:50

/*统计的环形图*/var my = echarts.init(document.getElementById("v"));// $(function(){...})是在页面DOM文档加载完成后加载执行的，等效于$(document).ready(function(){...});$(function() {    $.ajax({        type : "post",        async : true,   //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）        url : "/xxx/p",  //请求发送到TestServlet处        data : {},        dataType : "json",        //返回数据形式为json        success : function(data) {            var option = {                tooltip: {                    trigger: 'item',                    formatter: "{a} <br/>{b}: {c} 人"                },                legend: {                    orient: 'vertical',                    x: 'left',                    data: ['总人数']                },                series: [                    {                        name: '网站统计数据',                        type: 'pie',                        radius: ['50%', '65%'],                        avoidLabelOverlap: false,                        label: {                            normal: {                                show: false,                                position: 'center'                            },                            emphasis: {                                show: true,                                textStyle: {                                    fontSize: '20'                                }                            }                        },                        itemStyle: {                            normal: {                                color: '#0F88EB'                            }                        },                        labelLine: {                            normal: {                                show: false                            }                        },                        data:                            [{value: data , name: '人数'}]   //data是json的值                    }]            };// 使用刚指定的配置项和数据显示图表。            my.setOption(option);        }    });});//添加定时器监听事件,南丁格尔图随着浏览器屏幕的大小的变化而变化window.addEventListener("resize", function () {    setTimeout("my.resize()",100);});

控制器:

 public function p(){        $data= User::all()->count();//        dd($data);        return json_encode($data);    }

var my= echarts.init(document.getElementById("v"));        var option={            tooltip: {                trigger: 'item',                formatter: "{a} <br/>{b}: {c}人 ({d}%)"            },            series: [                {                    name: '本网站的统计',                    type: 'pie',                    radius: ['50%', '65%'],                    avoidLabelOverlap: false,                    label: {                        normal: {                            show: false,                            position: 'center'                        },                        emphasis: {                            show: true,                            textStyle: {                                fontSize: '20'                            }                        }                    },                    labelLine: {                        normal: {                            show: false                        }                    },                    data: [                        {   value:{{$persex['女']}},                            name: '女',//                            改变扇区的颜色                            itemStyle:{                                normal:{color:'red'}                            }                          },                        {   value:{{$persex['男']}},                            name: '男',                            itemStyle:{                                normal:{color:'#0F88EB'}                            }                        }                    ]                }            ]        };        my.setOption(option);        window.addEventListener("resize", function () {            setTimeout("my.resize()",100);        });

laravel调用方法

public function index(){   // 统计男女所占的比例   $persex= $this->x();    return view('/')->with('persex',$persex);}
public function x(){    $data=[];    $data['男']=User::where('sex','=','1')->count();    $data['女']=User::where('sex','=','0')->count();    return $data;}

阅读全文

0 0