145 lines
4.6 KiB
PHP
145 lines
4.6 KiB
PHP
@extends('layouts.base')
|
|
<script src="{{static_url('js/echarts.js')}}" type="text/javascript"></script>
|
|
@section('title', '会员统计')
|
|
@section('content')
|
|
<div class="rightlist">
|
|
|
|
@include('layouts.tabs')
|
|
|
|
<div class='panel panel-default form-horizontal form'>
|
|
<div class='panel-body'>
|
|
<div id="sourceChart" style="width: 50%;height:300px;float: left;"></div>
|
|
<div id="genderChart" style="width: 50%;height:300px;float: left;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='panel panel-default form-horizontal form'>
|
|
<div class='panel-heading'>会员统计</div>
|
|
<div class='panel-body'>
|
|
|
|
|
|
@foreach($member_count as $key => $item)
|
|
<div class="form-group">
|
|
<div class="col-sm-8 col-lg-12 col-xs-12">
|
|
<table class="table table-hover" >
|
|
<thead>
|
|
<tr style="text-align: center;">
|
|
<th style='width:150px;text-align: center;'>{{ $item['first_name'] }}</th>
|
|
<th style='width:150px;text-align: center;'>{{ $item['second_name'] }}</th>
|
|
<th>{{ $item['third_name'] }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr style="text-align: center;">
|
|
<td>{{ $item['first_value'] }}</td>
|
|
<td>{{ $item['second_value'] }}</td>
|
|
<td>
|
|
<div class="progress" style="height: 20px; margin-top: 15px;">
|
|
<div style="width: {{ $item['third_value'] }}; height: 20px; background: #00bf00;" class="progress-bar progress-bar-info"><span class='num'>{{ $item['third_value'] }}</span></div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
|
|
//会员性别统计
|
|
var genderChart = echarts.init(document.getElementById('genderChart'));
|
|
|
|
gender_data = {!! $gender !!};
|
|
gender_option = {
|
|
title : {
|
|
text: '性别比例',
|
|
x: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
data: ['男','女','未知']
|
|
},
|
|
series : [
|
|
{
|
|
name: '性别比例',
|
|
type: 'pie',
|
|
radius : '60%',
|
|
//center: ['50%', '60%'],
|
|
data:gender_data,
|
|
itemStyle: {
|
|
emphasis: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
genderChart.setOption(gender_option);
|
|
|
|
|
|
//会员结构统计
|
|
var sourceChart = echarts.init(document.getElementById('sourceChart'));
|
|
|
|
source_data = {!! $source !!};
|
|
gender_option = {
|
|
title : {
|
|
text: '会员结构统计',
|
|
x: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
data: ['微信授权','绑定手机']
|
|
},
|
|
series : [
|
|
{
|
|
name: '会员结构',
|
|
type: 'pie',
|
|
radius : ['40%', '60%'],
|
|
//center: ['50%', '60%'],
|
|
data:source_data,
|
|
itemStyle: {
|
|
emphasis: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
sourceChart.setOption(gender_option);
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
@endsection
|
|
|