app.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385
  1. $(function() {
  2. var $fullText = $('.admin-fullText');
  3. $('#admin-fullscreen').on('click', function() {
  4. $.AMUI.fullscreen.toggle();
  5. });
  6. $(document).on($.AMUI.fullscreen.raw.fullscreenchange, function() {
  7. $fullText.text($.AMUI.fullscreen.isFullscreen ? '退出全屏' : '开启全屏');
  8. });
  9. var dataType = $('body').attr('data-type');
  10. for (key in pageData) {
  11. if (key == dataType) {
  12. pageData[key]();
  13. }
  14. }
  15. $('.tpl-switch').find('.tpl-switch-btn-view').on('click', function() {
  16. $(this).prev('.tpl-switch-btn').prop("checked", function() {
  17. if ($(this).is(':checked')) {
  18. return false
  19. } else {
  20. return true
  21. }
  22. })
  23. // console.log('123123123')
  24. })
  25. })
  26. // ==========================
  27. // 侧边导航下拉列表
  28. // ==========================
  29. $('.tpl-left-nav-link-list').on('click', function() {
  30. $(this).siblings('.tpl-left-nav-sub-menu').slideToggle(80)
  31. .end()
  32. .find('.tpl-left-nav-more-ico').toggleClass('tpl-left-nav-more-ico-rotate');
  33. })
  34. // ==========================
  35. // 头部导航隐藏菜单
  36. // ==========================
  37. $('.tpl-header-nav-hover-ico').on('click', function() {
  38. $('.tpl-left-nav').toggle();
  39. $('.tpl-content-wrapper').toggleClass('tpl-content-wrapper-hover');
  40. })
  41. // 页面数据
  42. var pageData = {
  43. // ===============================================
  44. // 首页
  45. // ===============================================
  46. 'index': function indexData() {
  47. var myScroll = new IScroll('#wrapper', {
  48. scrollbars: true,
  49. mouseWheel: true,
  50. interactiveScrollbars: true,
  51. shrinkScrollbars: 'scale',
  52. preventDefault: false,
  53. fadeScrollbars: true
  54. });
  55. var myScrollA = new IScroll('#wrapperA', {
  56. scrollbars: true,
  57. mouseWheel: true,
  58. interactiveScrollbars: true,
  59. shrinkScrollbars: 'scale',
  60. preventDefault: false,
  61. fadeScrollbars: true
  62. });
  63. var myScrollB = new IScroll('#wrapperB', {
  64. scrollbars: true,
  65. mouseWheel: true,
  66. interactiveScrollbars: true,
  67. shrinkScrollbars: 'scale',
  68. preventDefault: false,
  69. fadeScrollbars: true
  70. });
  71. // document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false);
  72. // ==========================
  73. // 百度图表A http://echarts.baidu.com/
  74. // ==========================
  75. var echartsA = echarts.init(document.getElementById('tpl-echarts-A'));
  76. option = {
  77. tooltip: {
  78. trigger: 'axis',
  79. },
  80. legend: {
  81. data: ['邮件', '媒体', '资源']
  82. },
  83. grid: {
  84. left: '3%',
  85. right: '4%',
  86. bottom: '3%',
  87. containLabel: true
  88. },
  89. xAxis: [{
  90. type: 'category',
  91. boundaryGap: true,
  92. data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  93. }],
  94. yAxis: [{
  95. type: 'value'
  96. }],
  97. series: [{
  98. name: '邮件',
  99. type: 'line',
  100. stack: '总量',
  101. areaStyle: { normal: {} },
  102. data: [120, 132, 101, 134, 90, 230, 210],
  103. itemStyle: {
  104. normal: {
  105. color: '#59aea2'
  106. },
  107. emphasis: {
  108. }
  109. }
  110. },
  111. {
  112. name: '媒体',
  113. type: 'line',
  114. stack: '总量',
  115. areaStyle: { normal: {} },
  116. data: [220, 182, 191, 234, 290, 330, 310],
  117. itemStyle: {
  118. normal: {
  119. color: '#e7505a'
  120. }
  121. }
  122. },
  123. {
  124. name: '资源',
  125. type: 'line',
  126. stack: '总量',
  127. areaStyle: { normal: {} },
  128. data: [150, 232, 201, 154, 190, 330, 410],
  129. itemStyle: {
  130. normal: {
  131. color: '#32c5d2'
  132. }
  133. }
  134. }
  135. ]
  136. };
  137. echartsA.setOption(option);
  138. },
  139. // ===============================================
  140. // 图表页
  141. // ===============================================
  142. 'chart': function chartData() {
  143. // ==========================
  144. // 百度图表A http://echarts.baidu.com/
  145. // ==========================
  146. var echartsC = echarts.init(document.getElementById('tpl-echarts-C'));
  147. optionC = {
  148. tooltip: {
  149. trigger: 'axis'
  150. },
  151. toolbox: {
  152. top: '0',
  153. feature: {
  154. dataView: { show: true, readOnly: false },
  155. magicType: { show: true, type: ['line', 'bar'] },
  156. restore: { show: true },
  157. saveAsImage: { show: true }
  158. }
  159. },
  160. legend: {
  161. data: ['蒸发量', '降水量', '平均温度']
  162. },
  163. xAxis: [{
  164. type: 'category',
  165. data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  166. }],
  167. yAxis: [{
  168. type: 'value',
  169. name: '水量',
  170. min: 0,
  171. max: 250,
  172. interval: 50,
  173. axisLabel: {
  174. formatter: '{value} ml'
  175. }
  176. },
  177. {
  178. type: 'value',
  179. name: '温度',
  180. min: 0,
  181. max: 25,
  182. interval: 5,
  183. axisLabel: {
  184. formatter: '{value} °C'
  185. }
  186. }
  187. ],
  188. series: [{
  189. name: '蒸发量',
  190. type: 'bar',
  191. data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
  192. },
  193. {
  194. name: '降水量',
  195. type: 'bar',
  196. data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
  197. },
  198. {
  199. name: '平均温度',
  200. type: 'line',
  201. yAxisIndex: 1,
  202. data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
  203. }
  204. ]
  205. };
  206. echartsC.setOption(optionC);
  207. var echartsB = echarts.init(document.getElementById('tpl-echarts-B'));
  208. optionB = {
  209. tooltip: {
  210. trigger: 'axis'
  211. },
  212. legend: {
  213. x: 'center',
  214. data: ['某软件', '某主食手机', '某水果手机', '降水量', '蒸发量']
  215. },
  216. radar: [{
  217. indicator: [
  218. { text: '品牌', max: 100 },
  219. { text: '内容', max: 100 },
  220. { text: '可用性', max: 100 },
  221. { text: '功能', max: 100 }
  222. ],
  223. center: ['25%', '40%'],
  224. radius: 80
  225. },
  226. {
  227. indicator: [
  228. { text: '外观', max: 100 },
  229. { text: '拍照', max: 100 },
  230. { text: '系统', max: 100 },
  231. { text: '性能', max: 100 },
  232. { text: '屏幕', max: 100 }
  233. ],
  234. radius: 80,
  235. center: ['50%', '60%'],
  236. },
  237. {
  238. indicator: (function() {
  239. var res = [];
  240. for (var i = 1; i <= 12; i++) {
  241. res.push({ text: i + '月', max: 100 });
  242. }
  243. return res;
  244. })(),
  245. center: ['75%', '40%'],
  246. radius: 80
  247. }
  248. ],
  249. series: [{
  250. type: 'radar',
  251. tooltip: {
  252. trigger: 'item'
  253. },
  254. itemStyle: { normal: { areaStyle: { type: 'default' } } },
  255. data: [{
  256. value: [60, 73, 85, 40],
  257. name: '某软件'
  258. }]
  259. },
  260. {
  261. type: 'radar',
  262. radarIndex: 1,
  263. data: [{
  264. value: [85, 90, 90, 95, 95],
  265. name: '某主食手机'
  266. },
  267. {
  268. value: [95, 80, 95, 90, 93],
  269. name: '某水果手机'
  270. }
  271. ]
  272. },
  273. {
  274. type: 'radar',
  275. radarIndex: 2,
  276. itemStyle: { normal: { areaStyle: { type: 'default' } } },
  277. data: [{
  278. name: '降水量',
  279. value: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3],
  280. },
  281. {
  282. name: '蒸发量',
  283. value: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3]
  284. }
  285. ]
  286. }
  287. ]
  288. };
  289. echartsB.setOption(optionB);
  290. var echartsA = echarts.init(document.getElementById('tpl-echarts-A'));
  291. option = {
  292. tooltip: {
  293. trigger: 'axis',
  294. },
  295. legend: {
  296. data: ['邮件', '媒体', '资源']
  297. },
  298. grid: {
  299. left: '3%',
  300. right: '4%',
  301. bottom: '3%',
  302. containLabel: true
  303. },
  304. xAxis: [{
  305. type: 'category',
  306. boundaryGap: true,
  307. data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  308. }],
  309. yAxis: [{
  310. type: 'value'
  311. }],
  312. series: [{
  313. name: '邮件',
  314. type: 'line',
  315. stack: '总量',
  316. areaStyle: { normal: {} },
  317. data: [120, 132, 101, 134, 90, 230, 210],
  318. itemStyle: {
  319. normal: {
  320. color: '#59aea2'
  321. },
  322. emphasis: {
  323. }
  324. }
  325. },
  326. {
  327. name: '媒体',
  328. type: 'line',
  329. stack: '总量',
  330. areaStyle: { normal: {} },
  331. data: [220, 182, 191, 234, 290, 330, 310],
  332. itemStyle: {
  333. normal: {
  334. color: '#e7505a'
  335. }
  336. }
  337. },
  338. {
  339. name: '资源',
  340. type: 'line',
  341. stack: '总量',
  342. areaStyle: { normal: {} },
  343. data: [150, 232, 201, 154, 190, 330, 410],
  344. itemStyle: {
  345. normal: {
  346. color: '#32c5d2'
  347. }
  348. }
  349. }
  350. ]
  351. };
  352. echartsA.setOption(option);
  353. }
  354. }