/*统计的环形图*/
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;
}