index.blade.php 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368
  1. @extends('statistics.module.layouts.content')
  2. @push('meta')
  3. @endpush
  4. @push('css')
  5. @endpush
  6. @push('js')
  7. <script src="{{ theme_asset('app/js/echarts.common.min.js') }}"></script>
  8. @endpush
  9. @section('content')
  10. <div class="wide container person_basic_warp">
  11. @include('statistics.module.section.left_menu')
  12. <div class="cq_rt index_right">
  13. <div class="inside_timer">
  14. @include('statistics.module.section.timer')
  15. </div>
  16. <div class="person_basic_total">
  17. <div class="box-cell line">
  18. <div class="line-one" style="padding-top:15px;">
  19. <div>个人会员总数<span>{{$all_member_num}}</span></div>
  20. <div>当前个人会员数量<span class="font-red">{{$current_member_num}}</span></div>
  21. </div>
  22. </div>
  23. <div class="box-cell">
  24. <div class="line-one" style="padding-top:15px;">
  25. <div>简历总数<span>{{$resume_all_nums}}</span></div>
  26. <div>当前简历数量<span class="font-red">{{$resume_current_nums}}</span></div>
  27. </div>
  28. </div>
  29. <div class="clear"></div>
  30. </div>
  31. <div class="char-box c1">
  32. <div class="char-title">学历分布</div>
  33. <div id="education" style="width: 100%;height: 275px;"></div>
  34. </div>
  35. <div class="char-box c2">
  36. <div class="char-title">年龄分布</div>
  37. <div id="age" style="width: 100%;height: 275px;"></div>
  38. </div>
  39. <div class="char-box c3">
  40. <div class="char-title">性别分布</div>
  41. <div id="gender" style="width: 100%;height: 275px;"></div>
  42. </div>
  43. <div class="char-box c4">
  44. <div class="char-title">户籍分布TOP10</div>
  45. <div id="census" style="width: 100%;height: 275px;"></div>
  46. </div>
  47. <div class="clear"></div>
  48. </div>
  49. <div class="clear"></div>
  50. </div>
  51. @endsection
  52. @section('script')
  53. <script type="text/javascript">
  54. var colorList =["#ec948a","#54b7ea","#eab374","#61c5d0","#bddb89","#99b5ff","#797bac","#a9e0d4","#61c5d0","#8bc0df"];
  55. var genderColorList=["#4d8dff","#ff6992"]
  56. // 学历分布
  57. var chartData1 = [];
  58. @if($edu_data)
  59. @foreach($edu_data as $k=>$v)
  60. chartData1.push({value:"{{$v['value']}}", name:"{{$v['name']}}"});
  61. @endforeach
  62. @endif
  63. var chartName1 = [];
  64. @if ($edu_names)
  65. @foreach($edu_names as $k=>$v)
  66. chartName1.push("{{$v}}");
  67. @endforeach
  68. @endif
  69. var myChart1 = echarts.init(document.getElementById('education'));
  70. myChart1.setOption({
  71. tooltip: {
  72. trigger: 'item',
  73. formatter: "{a} <br/>{b}: {c} ({d}%)"
  74. },
  75. legend: {
  76. orient: 'vertical',
  77. textStyle:{
  78. color:'#555555',
  79. fontSize: 12,
  80. },
  81. left:10,
  82. top:15,
  83. itemWidth:15,
  84. itemHeight:8,
  85. data:chartName1
  86. },
  87. series: [
  88. {
  89. name:'学历分布',
  90. type:'pie',
  91. radius: ['50%', '75%'],
  92. center: ['60%', '50%'],
  93. clockwise :true,
  94. z:10,
  95. itemStyle: {
  96. normal: {
  97. color: function(params) {
  98. // build a color map as your need.
  99. return colorList[params.dataIndex]
  100. },
  101. }
  102. },
  103. label: {
  104. show:false
  105. /*normal: {
  106. formatter:'{b}: {d}%'
  107. }*/
  108. },
  109. labelLine: {
  110. normal: {
  111. length: 20,
  112. length2: 0,
  113. lineStyle:{
  114. width:2
  115. }
  116. }
  117. },
  118. data:chartData1
  119. },
  120. {
  121. name:'学历分布',
  122. type:'pie',
  123. radius: ['20%', '30%'],
  124. center: ['60%', '50%'],
  125. z:10,
  126. itemStyle: {
  127. normal: {
  128. color: function(params) {
  129. return colorList[params.dataIndex]
  130. },
  131. }
  132. },
  133. label:{
  134. show:false
  135. },
  136. data:chartData1
  137. }
  138. ]
  139. });
  140. // 年龄分布
  141. var chartData2 = [];
  142. var chartName2 = [];
  143. @if ($age_names)
  144. @foreach($age_names as $k=>$v)
  145. chartData2.push({value:"{{$age_data[$k]}}", name:"{{$v}}"});
  146. chartName2.push("{{$v}}");
  147. @endforeach
  148. @endif
  149. var myChart2 = echarts.init(document.getElementById('age'));
  150. myChart2.setOption({
  151. tooltip: {
  152. trigger: 'item',
  153. formatter: "{a} <br/>{b}: {c} ({d}%)"
  154. },
  155. legend: {
  156. orient: 'vertical',
  157. textStyle:{
  158. color:'#555555',
  159. fontSize: 12,
  160. },
  161. left:10,
  162. top:15,
  163. itemWidth:15,
  164. itemHeight:8,
  165. data:chartName2
  166. },
  167. series: [
  168. {
  169. name:'年龄分布',
  170. type:'pie',
  171. radius: ['50%', '75%'],
  172. center: ['60%', '50%'],
  173. clockwise :true,
  174. z:10,
  175. itemStyle: {
  176. normal: {
  177. color: function(params) {
  178. return colorList[params.dataIndex]
  179. },
  180. }
  181. },
  182. label: {
  183. show:false
  184. /*normal: {
  185. formatter:'{b}: {d}%'
  186. }*/
  187. },
  188. labelLine: {
  189. normal: {
  190. length: 20,
  191. length2: 0,
  192. lineStyle:{
  193. width:2
  194. }
  195. }
  196. },
  197. data:chartData2
  198. },
  199. {
  200. name:'年龄分布',
  201. type:'pie',
  202. radius: ['20%', '30%'],
  203. center: ['60%', '50%'],
  204. z:10,
  205. itemStyle: {
  206. normal: {
  207. color: function(params) {
  208. return colorList[params.dataIndex]
  209. },
  210. }
  211. },
  212. label:{
  213. show:false
  214. },
  215. data:chartData2
  216. }
  217. ]
  218. });
  219. // 性别分布
  220. var chartData3 = [];
  221. @if($sex_data)
  222. @foreach($sex_data as $k=>$v)
  223. chartData3.push({value:"{{$v['value']}}", name:"{{$v['name']}}"});
  224. @endforeach
  225. @endif
  226. var chartName3 = [];
  227. @if ($sex_names)
  228. @foreach($sex_names as $k=>$v)
  229. chartName3.push("{{$v}}");
  230. @endforeach
  231. @endif
  232. var myChart3 = echarts.init(document.getElementById('gender'));
  233. myChart3.setOption({
  234. tooltip: {
  235. trigger: 'item',
  236. formatter: "{a} <br/>{b}: {c} ({d}%)"
  237. },
  238. legend: {
  239. orient: 'vertical',
  240. textStyle:{
  241. color:'#555555',
  242. fontSize: 12,
  243. },
  244. left:10,
  245. top:15,
  246. itemWidth:15,
  247. itemHeight:8,
  248. data:chartName3
  249. },
  250. series: [
  251. {
  252. name:'性别分布',
  253. type:'pie',
  254. radius: ['50%', '75%'],
  255. center: ['60%', '50%'],
  256. clockwise :true,
  257. z:10,
  258. itemStyle: {
  259. normal: {
  260. color: function(params) {
  261. return genderColorList[params.dataIndex]
  262. },
  263. }
  264. },
  265. label: {
  266. show:false
  267. /*normal: {
  268. formatter:'{b}: {d}%'
  269. }*/
  270. },
  271. labelLine: {
  272. normal: {
  273. length: 20,
  274. length2: 0,
  275. lineStyle:{
  276. width:2
  277. }
  278. }
  279. },
  280. data:chartData3
  281. }
  282. ]
  283. });
  284. // 户籍分布TOP10
  285. var chartData4 = [];
  286. @if($address_data)
  287. @foreach($address_data as $k=>$v)
  288. chartData4.push("{{$v}}");
  289. @endforeach
  290. @endif
  291. var chartName4 = [];
  292. @if ($address_names)
  293. @foreach($address_names as $k=>$v)
  294. chartName4.push("{{$v}}");
  295. @endforeach
  296. @endif
  297. var myChart4 = echarts.init(document.getElementById('census'));
  298. myChart4.setOption({
  299. color: ['#3398DB'],
  300. tooltip: {
  301. trigger: 'axis',
  302. axisPointer: {
  303. type: 'shadow'
  304. }
  305. },
  306. grid: {
  307. top:'10',
  308. left: '20',
  309. right: '20',
  310. bottom: '10',
  311. containLabel: true
  312. },
  313. xAxis: {
  314. type: 'value',
  315. show:false,
  316. boundaryGap: [0, 0.01]
  317. },
  318. yAxis: {
  319. type: 'category',
  320. inverse:true, //是否反向坐标轴
  321. data: chartName4,
  322. axisLine:{
  323. show:false //是否显示坐标轴轴线
  324. },
  325. axisTick:{
  326. show:false //是否显示坐标轴刻度
  327. }
  328. },
  329. series: [
  330. {
  331. type: 'bar',
  332. barMaxWidth: '15',
  333. label: {
  334. normal: {
  335. show: true,
  336. textStyle: {
  337. color: '#000',
  338. fontSize: 14
  339. },
  340. position: 'right',
  341. formatter: function(data) {
  342. return chartData4[data.dataIndex]
  343. }
  344. }
  345. },
  346. data: chartData4
  347. }
  348. ]
  349. });
  350. </script>
  351. @endsection