123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368 |
- @extends('statistics.module.layouts.content')
- @push('meta')
- @endpush
- @push('css')
- @endpush
- @push('js')
- <script src="{{ theme_asset('app/js/echarts.common.min.js') }}"></script>
- @endpush
- @section('content')
- <div class="wide container person_basic_warp">
- @include('statistics.module.section.left_menu')
- <div class="cq_rt index_right">
- <div class="inside_timer">
- @include('statistics.module.section.timer')
- </div>
- <div class="person_basic_total">
- <div class="box-cell line">
- <div class="line-one" style="padding-top:15px;">
- <div>个人会员总数<span>{{$all_member_num}}</span></div>
- <div>当前个人会员数量<span class="font-red">{{$current_member_num}}</span></div>
- </div>
- </div>
- <div class="box-cell">
- <div class="line-one" style="padding-top:15px;">
- <div>简历总数<span>{{$resume_all_nums}}</span></div>
- <div>当前简历数量<span class="font-red">{{$resume_current_nums}}</span></div>
- </div>
- </div>
- <div class="clear"></div>
- </div>
- <div class="char-box c1">
- <div class="char-title">学历分布</div>
- <div id="education" style="width: 100%;height: 275px;"></div>
- </div>
- <div class="char-box c2">
- <div class="char-title">年龄分布</div>
- <div id="age" style="width: 100%;height: 275px;"></div>
- </div>
- <div class="char-box c3">
- <div class="char-title">性别分布</div>
- <div id="gender" style="width: 100%;height: 275px;"></div>
- </div>
- <div class="char-box c4">
- <div class="char-title">户籍分布TOP10</div>
- <div id="census" style="width: 100%;height: 275px;"></div>
- </div>
- <div class="clear"></div>
- </div>
- <div class="clear"></div>
- </div>
- @endsection
- @section('script')
- <script type="text/javascript">
- var colorList =["#ec948a","#54b7ea","#eab374","#61c5d0","#bddb89","#99b5ff","#797bac","#a9e0d4","#61c5d0","#8bc0df"];
- var genderColorList=["#4d8dff","#ff6992"]
- // 学历分布
- var chartData1 = [];
- @if($edu_data)
- @foreach($edu_data as $k=>$v)
- chartData1.push({value:"{{$v['value']}}", name:"{{$v['name']}}"});
- @endforeach
- @endif
- var chartName1 = [];
- @if ($edu_names)
- @foreach($edu_names as $k=>$v)
- chartName1.push("{{$v}}");
- @endforeach
- @endif
- var myChart1 = echarts.init(document.getElementById('education'));
- myChart1.setOption({
- tooltip: {
- trigger: 'item',
- formatter: "{a} <br/>{b}: {c} ({d}%)"
- },
- legend: {
- orient: 'vertical',
- textStyle:{
- color:'#555555',
- fontSize: 12,
- },
- left:10,
- top:15,
- itemWidth:15,
- itemHeight:8,
- data:chartName1
- },
- series: [
- {
- name:'学历分布',
- type:'pie',
- radius: ['50%', '75%'],
- center: ['60%', '50%'],
- clockwise :true,
- z:10,
- itemStyle: {
- normal: {
- color: function(params) {
- // build a color map as your need.
- return colorList[params.dataIndex]
- },
- }
- },
- label: {
- show:false
- /*normal: {
- formatter:'{b}: {d}%'
- }*/
- },
- labelLine: {
- normal: {
- length: 20,
- length2: 0,
- lineStyle:{
- width:2
- }
- }
- },
- data:chartData1
- },
- {
- name:'学历分布',
- type:'pie',
- radius: ['20%', '30%'],
- center: ['60%', '50%'],
- z:10,
- itemStyle: {
- normal: {
- color: function(params) {
- return colorList[params.dataIndex]
- },
- }
- },
- label:{
- show:false
- },
- data:chartData1
- }
- ]
- });
- // 年龄分布
- var chartData2 = [];
- var chartName2 = [];
- @if ($age_names)
- @foreach($age_names as $k=>$v)
- chartData2.push({value:"{{$age_data[$k]}}", name:"{{$v}}"});
- chartName2.push("{{$v}}");
- @endforeach
- @endif
- var myChart2 = echarts.init(document.getElementById('age'));
- myChart2.setOption({
- tooltip: {
- trigger: 'item',
- formatter: "{a} <br/>{b}: {c} ({d}%)"
- },
- legend: {
- orient: 'vertical',
- textStyle:{
- color:'#555555',
- fontSize: 12,
- },
- left:10,
- top:15,
- itemWidth:15,
- itemHeight:8,
- data:chartName2
- },
- series: [
- {
- name:'年龄分布',
- type:'pie',
- radius: ['50%', '75%'],
- center: ['60%', '50%'],
- clockwise :true,
- z:10,
- itemStyle: {
- normal: {
- color: function(params) {
- return colorList[params.dataIndex]
- },
- }
- },
- label: {
- show:false
- /*normal: {
- formatter:'{b}: {d}%'
- }*/
- },
- labelLine: {
- normal: {
- length: 20,
- length2: 0,
- lineStyle:{
- width:2
- }
- }
- },
- data:chartData2
- },
- {
- name:'年龄分布',
- type:'pie',
- radius: ['20%', '30%'],
- center: ['60%', '50%'],
- z:10,
- itemStyle: {
- normal: {
- color: function(params) {
- return colorList[params.dataIndex]
- },
- }
- },
- label:{
- show:false
- },
- data:chartData2
- }
- ]
- });
- // 性别分布
- var chartData3 = [];
- @if($sex_data)
- @foreach($sex_data as $k=>$v)
- chartData3.push({value:"{{$v['value']}}", name:"{{$v['name']}}"});
- @endforeach
- @endif
- var chartName3 = [];
- @if ($sex_names)
- @foreach($sex_names as $k=>$v)
- chartName3.push("{{$v}}");
- @endforeach
- @endif
- var myChart3 = echarts.init(document.getElementById('gender'));
- myChart3.setOption({
- tooltip: {
- trigger: 'item',
- formatter: "{a} <br/>{b}: {c} ({d}%)"
- },
- legend: {
- orient: 'vertical',
- textStyle:{
- color:'#555555',
- fontSize: 12,
- },
- left:10,
- top:15,
- itemWidth:15,
- itemHeight:8,
- data:chartName3
- },
- series: [
- {
- name:'性别分布',
- type:'pie',
- radius: ['50%', '75%'],
- center: ['60%', '50%'],
- clockwise :true,
- z:10,
- itemStyle: {
- normal: {
- color: function(params) {
- return genderColorList[params.dataIndex]
- },
- }
- },
- label: {
- show:false
- /*normal: {
- formatter:'{b}: {d}%'
- }*/
- },
- labelLine: {
- normal: {
- length: 20,
- length2: 0,
- lineStyle:{
- width:2
- }
- }
- },
- data:chartData3
- }
- ]
- });
- // 户籍分布TOP10
- var chartData4 = [];
- @if($address_data)
- @foreach($address_data as $k=>$v)
- chartData4.push("{{$v}}");
- @endforeach
- @endif
- var chartName4 = [];
- @if ($address_names)
- @foreach($address_names as $k=>$v)
- chartName4.push("{{$v}}");
- @endforeach
- @endif
- var myChart4 = echarts.init(document.getElementById('census'));
- myChart4.setOption({
- color: ['#3398DB'],
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- grid: {
- top:'10',
- left: '20',
- right: '20',
- bottom: '10',
- containLabel: true
- },
- xAxis: {
- type: 'value',
- show:false,
- boundaryGap: [0, 0.01]
- },
- yAxis: {
- type: 'category',
- inverse:true, //是否反向坐标轴
- data: chartName4,
- axisLine:{
- show:false //是否显示坐标轴轴线
- },
- axisTick:{
- show:false //是否显示坐标轴刻度
- }
- },
- series: [
- {
- type: 'bar',
- barMaxWidth: '15',
- label: {
- normal: {
- show: true,
- textStyle: {
- color: '#000',
- fontSize: 14
- },
- position: 'right',
- formatter: function(data) {
- return chartData4[data.dataIndex]
- }
- }
- },
- data: chartData4
- }
- ]
- });
- </script>
- @endsection
|