base.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422
  1. function fnW(str) {
  2. var num;
  3. str >= 10 ? num = str : num = "0" + str;
  4. return num;
  5. }
  6. //中国地图开始
  7. //var china_map =echarts.init(document.getElementById("china_map"),'macarons');
  8. var china_map =echarts.init(document.getElementById("china_map"),'infographic');
  9. //var china_map =echarts.init(document.getElementById("china_map"),'shine');
  10. function randomData() {
  11. return Math.round(Math.random()*500);
  12. }
  13. var mydata = [
  14. {name: '北京',value: randomData() },{name: '天津',value: randomData() },
  15. {name: '上海',value: randomData() },{name: '重庆',value: randomData() },
  16. {name: '河北',value: randomData() },{name: '河南',value: randomData() },
  17. {name: '云南',value: randomData() },{name: '辽宁',value: randomData() },
  18. {name: '黑龙江',value: randomData() },{name: '湖南',value: randomData()},
  19. {name: '安徽',value: randomData() },{name: '山东',value: randomData() },
  20. {name: '新疆',value: randomData() },{name: '江苏',value: randomData() },
  21. {name: '浙江',value: randomData() },{name: '江西',value: randomData() },
  22. {name: '湖北',value: randomData() },{name: '广西',value: randomData() },
  23. {name: '甘肃',value: randomData() },{name: '山西',value: randomData() },
  24. {name: '内蒙古',value: randomData() },{name: '陕西',value: randomData()},
  25. {name: '吉林',value: randomData() },{name: '福建',value: randomData() },
  26. {name: '贵州',value: randomData() },{name: '广东',value: randomData() },
  27. {name: '青海',value: randomData() },{name: '西藏',value: randomData() },
  28. {name: '四川',value: randomData() },{name: '宁夏',value: randomData() },
  29. {name: '海南',value: randomData() },{name: '台湾',value: randomData() },
  30. {name: '香港',value: randomData() },{name: '澳门',value: randomData() }
  31. ];
  32. var option = {
  33. //backgroundColor: '#FFFFFF',
  34. title: {
  35. text: '犯罪人口来源分析',
  36. textStyle:{color:'#fff'},
  37. //subtext: '纯属虚构',
  38. x:'center'
  39. },
  40. tooltip : {
  41. trigger: 'item'
  42. },
  43. visualMap: {
  44. show : false,
  45. x: 'left',
  46. y: 'bottom',
  47. //layoutCenter:['30%','30%'],
  48. splitList: [
  49. {start: 500, end:600},{start: 400, end: 500},
  50. {start: 300, end: 400},{start: 200, end: 300},
  51. {start: 100, end: 200},{start: 0, end: 100},
  52. ],
  53. color: ['#ff0', '#ffff00', '#0E94EB','#6FBCF0', '#F0F06F', '#00CC00']
  54. },
  55. series: [{
  56. name: '犯罪人口来源分析',
  57. type: 'map',
  58. mapType: 'china',
  59. roam: true,
  60. label: {
  61. normal: {
  62. show: false
  63. },
  64. emphasis: {
  65. show: false
  66. }
  67. },
  68. data:mydata
  69. }]
  70. };
  71. china_map.setOption(option);
  72. //中国地图结束
  73. //获取当前时间
  74. var timer = setInterval(function () {
  75. var date = new Date();
  76. var year = date.getFullYear(); //当前年份
  77. var month = date.getMonth(); //当前月份
  78. var data = date.getDate(); //天
  79. var hours = date.getHours(); //小时
  80. var minute = date.getMinutes(); //分
  81. var second = date.getSeconds(); //秒
  82. var day = date.getDay(); //获取当前星期几
  83. var ampm = hours < 12 ? 'am' : 'pm';
  84. $('#time').html(fnW(hours) + ":" + fnW(minute) + ":" + fnW(second));
  85. $('#date').html('<span>' + year + '/' + (month + 1) + '/' + data + '</span><span>' + ampm + '</span><span>周' + day + '</span>')
  86. }, 1000)
  87. //违法犯罪人员分析占比,带边框效果的饼图
  88. //var pie_fanzui =echarts.init(document.getElementById("pie_fanzui"),'macarons');
  89. var pie_fanzui =echarts.init(document.getElementById("pie_fanzui"),'infographic');
  90. option = {
  91. title : {
  92. x:'center'
  93. },
  94. tooltip : {
  95. trigger: 'item',
  96. formatter: "{a} <br/>{b} : {c} ({d}%)"
  97. },
  98. legend: {
  99. orient: 'vertical',
  100. left: 'left',
  101. data: ['卖淫嫖娼','经侦嫌疑','重点人口','刑贞重点','吸毒人口'],
  102. textStyle: {color: '#fff'}
  103. },
  104. label: {
  105. normal: {
  106. textStyle: {
  107. color: 'red' // 改变标示文字的颜色
  108. }
  109. }
  110. },
  111. series : [
  112. {
  113. name: '违法犯罪人员分析',
  114. type: 'pie',
  115. radius : '55%',
  116. center: ['50%', '60%'],
  117. data:[
  118. {value:335, name:'卖淫嫖娼'},
  119. {value:310, name:'经侦嫌疑'},
  120. {value:234, name:'重点人口'},
  121. {value:135, name:'刑贞重点'},
  122. {value:1548, name:'吸毒人口'}
  123. ],
  124. itemStyle: {
  125. emphasis: {
  126. shadowBlur: 10,
  127. shadowOffsetX: 0,
  128. shadowColor: 'rgba(0, 0, 0, 0.5)'
  129. }
  130. }
  131. }
  132. ]
  133. };
  134. pie_fanzui.setOption(option);
  135. //----------------------违法犯罪人员分析占比end---------------
  136. //违法犯罪人员年龄分析占比,带边框效果的饼图
  137. //var pie_age =echarts.init(document.getElementById("pie_age"),'macarons');
  138. var pie_age =echarts.init(document.getElementById("pie_age"),'infographic');
  139. //var pie_age =echarts.init(document.getElementById("pie_age"),'shine');
  140. option = {
  141. tooltip: {
  142. trigger: 'item',
  143. formatter: "{a} <br/>{b}: {c} ({d}%)"
  144. },
  145. legend: {
  146. orient: 'vertical',
  147. x: 'left',
  148. data:['18-30','31-40','41-50','51-60','65岁以上','未标明'],
  149. textStyle: {color: '#fff'}
  150. },
  151. series: [
  152. {
  153. name:'违法犯罪人员年龄分布',
  154. type:'pie',
  155. radius: ['30%', '55%'],
  156. avoidLabelOverlap: false,
  157. label: {
  158. normal: {
  159. show: false,
  160. position: 'center'
  161. },
  162. emphasis: {
  163. show: true,
  164. textStyle: {
  165. fontSize: '20',
  166. fontWeight: 'bold'
  167. }
  168. }
  169. },
  170. labelLine: {
  171. normal: {
  172. show: false
  173. }
  174. },
  175. data:[
  176. {value:335, name:'18-30'},
  177. {value:310, name:'31-40'},
  178. {value:234, name:'41-50'},
  179. {value:135, name:'51-60'},
  180. {value:135, name:'65岁以上'},
  181. {value:1548, name:'未标明'}
  182. ]
  183. }
  184. ]
  185. };
  186. pie_age.setOption(option);
  187. //----------------------违法犯罪人员年龄分析占比end---------------
  188. //===================人口出入时间段统计=======================
  189. //var line_time =echarts.init(document.getElementById("line_time"),'shine');
  190. var line_time =echarts.init(document.getElementById("line_time"),'macarons');
  191. //var line_time =echarts.init(document.getElementById("line_time"),'infographic');
  192. var option = {
  193. // 给echarts图设置背景色
  194. //backgroundColor: '#FBFBFB', // -----------> // 给echarts图设置背景色
  195. color: ['#7FFF00'],
  196. tooltip: {
  197. trigger: 'axis'
  198. },
  199. grid:{
  200. x:40,
  201. y:30,
  202. x2:5,
  203. y2:20
  204. },
  205. calculable: true,
  206. xAxis: [{
  207. type: 'category',
  208. data: ['6:00-9:00', '10:00-12:00', '13:00-15:00', '16:00-20:00', '21:00-24:00'],
  209. axisLabel: {
  210. color: "#7FFF00" //刻度线标签颜色
  211. }
  212. }],
  213. yAxis: [{
  214. type: 'value',
  215. axisLabel: {
  216. color: "#7FFF00" //刻度线标签颜色
  217. }
  218. }],
  219. series: [{
  220. name: '人次',
  221. type: 'line',
  222. data: [800, 300, 500, 800, 300, 600],
  223. }]
  224. };
  225. line_time.setOption(option);
  226. //=========违法犯罪人员地区分布开始=======================
  227. //var qufenbu_data =echarts.init(document.getElementById("qufenbu_data"),'shine');
  228. //var qufenbu_data =echarts.init(document.getElementById("qufenbu_data"),'macarons');
  229. var qufenbu_data =echarts.init(document.getElementById("qufenbu_data"),'infographic');
  230. option = {
  231. color: ['#FADB71'],
  232. tooltip : {
  233. trigger: 'axis',
  234. axisPointer : { // 坐标轴指示器,坐标轴触发有效
  235. type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  236. }
  237. },
  238. grid: {
  239. x:30,
  240. y:10,
  241. x2:15,
  242. y2:20
  243. },
  244. xAxis : [
  245. {
  246. type : 'category',
  247. data : ['河北', '天津', '北京', '新疆', '内蒙', '宁夏', '海南'],
  248. axisTick: {
  249. alignWithLabel: true
  250. },
  251. axisLabel: {
  252. color: "#FADB71" //刻度线标签颜色
  253. }
  254. }
  255. ],
  256. yAxis : [
  257. {
  258. type : 'value',
  259. axisLabel: {
  260. color: "#FADB71" //刻度线标签颜色
  261. }
  262. }
  263. ],
  264. series : [
  265. {
  266. name:'地区分布',
  267. type:'bar',
  268. barWidth: '60%',
  269. data:[10, 52, 200, 334, 390, 330, 220]
  270. }
  271. ]
  272. };
  273. qufenbu_data.setOption(option);
  274. //=========违法犯罪人员地区分布结束=======================
  275. //时间选择器
  276. var startV = '';
  277. var endV = '';
  278. laydate.skin('danlan');
  279. var startTime = {
  280. elem: '#startTime',
  281. format: 'YYYY-MM-DD',
  282. min: '1997-01-01', //设定最小日期为当前日期
  283. max: laydate.now(), //最大日期
  284. istime: true,
  285. istoday: true,
  286. fixed: false,
  287. choose: function (datas) {
  288. startV = datas;
  289. endTime.min = datas; //开始日选好后,重置结束日的最小日期
  290. }
  291. };
  292. var endTime = {
  293. elem: '#endTime',
  294. format: 'YYYY-MM-DD',
  295. min: laydate.now(),
  296. max: laydate.now(),
  297. istime: true,
  298. istoday: true,
  299. fixed: false,
  300. choose: function (datas) {
  301. // startTime.max = datas; //结束日选好后,重置开始日的最大日期
  302. endV = datas;
  303. }
  304. };
  305. laydate(startTime);
  306. laydate(endTime);
  307. //时间选择器
  308. var startVs = '';
  309. var endVs = '';
  310. laydate.skin('danlan');
  311. var startTimes = {
  312. elem: '#startTimes',
  313. format: 'YYYY-MM-DD',
  314. min: '1997-01-01', //设定最小日期为当前日期
  315. max: '2099-06-16', //最大日期
  316. istime: true,
  317. istoday: true,
  318. fixed: false,
  319. choose: function (datas) {
  320. startVs = datas;
  321. endTimes.min = datas; //开始日选好后,重置结束日的最小日期
  322. setQgData($('#barTypes').parent().parent(), 1);
  323. }
  324. };
  325. var endTimes = {
  326. elem: '#endTimes',
  327. format: 'YYYY-MM-DD',
  328. min: laydate.now(),
  329. max: laydate.now(),
  330. istime: true,
  331. istoday: true,
  332. fixed: false,
  333. choose: function (datas) {
  334. // startTime.max = datas; //结束日选好后,重置开始日的最大日期
  335. endVs = datas;
  336. setQgData($('#barTypes').parent().parent(), 1);
  337. }
  338. };
  339. laydate(startTimes);
  340. laydate(endTimes);
  341. //更改日期插件的样式
  342. function dateCss() {
  343. var arr = $('#laydate_box').attr('style').split(';');
  344. var cssStr =
  345. 'position:absolute;right:0;';
  346. for (var i = 0; i < arr.length; i++) {
  347. if (arr[i].indexOf('top') != -1) {
  348. cssStr += arr[i];
  349. }
  350. }
  351. $('#laydate_box').attr('style', cssStr);
  352. }
  353. var workDate;
  354. var time = {
  355. elem: '#times',
  356. format: 'YYYY-MM-DD',
  357. min: laydate.now(),
  358. max: laydate.now() + 30,
  359. istime: true,
  360. istoday: true,
  361. fixed: false,
  362. choose: function (datas) {
  363. // startTime.max = datas; //结束日选好后,重置开始日的最大日期
  364. workDate = datas;
  365. }
  366. };
  367. laydate(time);