console.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. /**
  2. @Name:layuiAdmin 主页控制台
  3. @Author:贤心
  4. @Site:http://www.layui.com/admin/
  5. @License:GPL-2
  6. */
  7. layui.define(function(exports){
  8. /*
  9. 下面通过 layui.use 分段加载不同的模块,实现不同区域的同时渲染,从而保证视图的快速呈现
  10. */
  11. //区块轮播切换
  12. layui.use(['admin', 'carousel'], function(){
  13. var $ = layui.$
  14. ,admin = layui.admin
  15. ,carousel = layui.carousel
  16. ,element = layui.element
  17. ,device = layui.device();
  18. //轮播切换
  19. $('.layadmin-carousel').each(function(){
  20. var othis = $(this);
  21. carousel.render({
  22. elem: this
  23. ,width: '100%'
  24. ,arrow: 'none'
  25. ,interval: othis.data('interval')
  26. ,autoplay: othis.data('autoplay') === true
  27. ,trigger: (device.ios || device.android) ? 'click' : 'hover'
  28. ,anim: othis.data('anim')
  29. });
  30. });
  31. element.render('progress');
  32. });
  33. //数据概览
  34. layui.use(['carousel', 'echarts'], function(){
  35. var $ = layui.$
  36. ,carousel = layui.carousel
  37. ,echarts = layui.echarts;
  38. var echartsApp = [], options = [
  39. //今日流量趋势
  40. {
  41. title: {
  42. text: '今日流量趋势',
  43. x: 'center',
  44. textStyle: {
  45. fontSize: 14
  46. }
  47. },
  48. tooltip : {
  49. trigger: 'axis'
  50. },
  51. legend: {
  52. data:['','']
  53. },
  54. xAxis : [{
  55. type : 'category',
  56. boundaryGap : false,
  57. data: ['06:00','06:30','07:00','07:30','08:00','08:30','09:00','09:30','10:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30']
  58. }],
  59. yAxis : [{
  60. type : 'value'
  61. }],
  62. series : [{
  63. name:'PV',
  64. type:'line',
  65. smooth:true,
  66. itemStyle: {normal: {areaStyle: {type: 'default'}}},
  67. data: [111,222,333,444,555,666,3333,33333,55555,66666,33333,3333,6666,11888,26666,38888,56666,42222,39999,28888,17777,9666,6555,5555,3333,2222,3111,6999,5888,2777,1666,999,888,777]
  68. },{
  69. name:'UV',
  70. type:'line',
  71. smooth:true,
  72. itemStyle: {normal: {areaStyle: {type: 'default'}}},
  73. data: [11,22,33,44,55,66,333,3333,5555,12666,3333,333,666,1188,2666,3888,6666,4222,3999,2888,1777,966,655,555,333,222,311,699,588,277,166,99,88,77]
  74. }]
  75. },
  76. //访客浏览器分布
  77. {
  78. title : {
  79. text: '访客浏览器分布',
  80. x: 'center',
  81. textStyle: {
  82. fontSize: 14
  83. }
  84. },
  85. tooltip : {
  86. trigger: 'item',
  87. formatter: "{a} <br/>{b} : {c} ({d}%)"
  88. },
  89. legend: {
  90. orient : 'vertical',
  91. x : 'left',
  92. data:['Chrome','Firefox','IE 8.0','Safari','其它浏览器']
  93. },
  94. series : [{
  95. name:'访问来源',
  96. type:'pie',
  97. radius : '55%',
  98. center: ['50%', '50%'],
  99. data:[
  100. {value:9052, name:'Chrome'},
  101. {value:1610, name:'Firefox'},
  102. {value:3200, name:'IE 8.0'},
  103. {value:535, name:'Safari'},
  104. {value:1700, name:'其它浏览器'}
  105. ]
  106. }]
  107. },
  108. //新增的用户量
  109. {
  110. title: {
  111. text: '最近一周新增的用户量',
  112. x: 'center',
  113. textStyle: {
  114. fontSize: 14
  115. }
  116. },
  117. tooltip : { //提示框
  118. trigger: 'axis',
  119. formatter: "{b}<br>新增用户:{c}"
  120. },
  121. xAxis : [{ //X轴
  122. type : 'category',
  123. data : ['11-07', '11-08', '11-09', '11-10', '11-11', '11-12', '11-13']
  124. }],
  125. yAxis : [{ //Y轴
  126. type : 'value'
  127. }],
  128. series : [{ //内容
  129. type: 'line',
  130. data:[200, 300, 400, 610, 150, 270, 380],
  131. }]
  132. }
  133. ]
  134. ,elemDataView = $('#LAY-index-dataview').children('div')
  135. ,renderDataView = function(index){
  136. echartsApp[index] = echarts.init(elemDataView[index], layui.echartsTheme);
  137. echartsApp[index].setOption(options[index]);
  138. window.onresize = echartsApp[index].resize;
  139. };
  140. //没找到DOM,终止执行
  141. if(!elemDataView[0]) return;
  142. renderDataView(0);
  143. //监听数据概览轮播
  144. var carouselIndex = 0;
  145. carousel.on('change(LAY-index-dataview)', function(obj){
  146. renderDataView(carouselIndex = obj.index);
  147. });
  148. //监听侧边伸缩
  149. layui.admin.on('side', function(){
  150. setTimeout(function(){
  151. renderDataView(carouselIndex);
  152. }, 300);
  153. });
  154. //监听路由
  155. layui.admin.on('hash(tab)', function(){
  156. layui.router().path.join('') || renderDataView(carouselIndex);
  157. });
  158. });
  159. //最新订单
  160. layui.use('table', function(){
  161. var $ = layui.$
  162. ,table = layui.table;
  163. });
  164. exports('console', {})
  165. });