activity.html 49 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078
  1. <!doctype html>
  2. <meta charset="utf-8">
  3. <title>人口分析</title>
  4. <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
  5. <script src="js/echarts.min.js" charset="utf-8"></script>
  6. <body>
  7. <div class="bnt">
  8. <div class="topbnt_left fl">
  9. <ul><li ><a href="#">警情警力</a></li>
  10. <li ><a href="#">人口分析</a></li>
  11. <li class="active"><a href="#">活动情况</a></li>
  12. <li><a href="#">矛盾纠纷</a></li>
  13. </ul>
  14. </div>
  15. <h1 class="tith1 fl">活动情况分析</h1>
  16. <div class=" fr topbnt_right">
  17. <ul>
  18. <li><a href="#">返回</a></li>
  19. <li><a href="#">分析报告</a></li>
  20. <li><a href="#">交通</a></li>
  21. <li><a href="#">舆情</a></li>
  22. </ul>
  23. </div>
  24. </div>
  25. <!-- bnt end -->
  26. <div class="left1 pleft1">
  27. <div class="lefttime"><h2 class="tith2">统计时间</h2>
  28. <div class="lefttime_text">
  29. <ul>
  30. <li class="bg active">今日</li>
  31. <li></li>
  32. <li class="bg">本周</li>
  33. <li></li>
  34. <li class="bg">本月</li>
  35. <li></li>
  36. <li class="bg">本季</li>
  37. <li></li>
  38. <li class="bg">本年</li>
  39. </ul>
  40. </div>
  41. </div>
  42. <div class="plefttoday"><h2 class="tith2">今日活动统计</h2>
  43. <div class="lefttoday_tit" style=" height:8%"><p class="fl">地区:甘孜</p><p class="fr">2018-06-14</p></div>
  44. <div class="lefttoday_number">
  45. <div class="widget-inline-box text-center fl">
  46. <p>活动总数</p>
  47. <h3 class="ceeb1fd">54</h3>
  48. <h4 class="text-muted">环比<img src="img/iconup.png" height="16" />2%</h4>
  49. </div>
  50. <div class="widget-inline-box text-center fl">
  51. <p>佛事活动</p>
  52. <h3 class="c24c9ff">54</h3>
  53. <h4 class="text-muted">环比<img src="img/icondown.png" height="16" />3%</h4>
  54. </div>
  55. <div class="widget-inline-box text-center fl">
  56. <p>民俗活动</p>
  57. <h3 class="cffff00">4</h3>
  58. <h4 class="text-muted">环比<img src="img/icondown.png" height="16" />3%</h4>
  59. </div>
  60. <div class="widget-inline-box text-center fl">
  61. <p>其他活动</p>
  62. <h3 class="c11e2dd">4</h3>
  63. <h4 class="text-muted">环比<img src="img/icondown.png" height="16" />3%</h4>
  64. </div>
  65. </div>
  66. <!-- lefttoday_number end -->
  67. <!-- lefttoday_bar end-->
  68. </div>
  69. <div class="lpeftmidbot">
  70. <h2 class="tith2">活动占比</h2>
  71. <div id="lpeftbot" class="lpeftmidbotcont"></div>
  72. </div>
  73. <div class="lpeftbot">
  74. <h2 class="tith2">活动人员性别分析</h2>
  75. <div id="lpeftmidbot" class="lpeftbotcont" ></div>
  76. </div>
  77. </div>
  78. <!-- left1 end -->
  79. <div class="left2">
  80. <div class="pleftbox2top">
  81. <h2 class="tith2">活动人口名族分析</h2>
  82. <div id="pleftbox2top" class="pleftbox2topcont"></div>
  83. </div>
  84. <div class="pleftbox2midd"><h2 class="tith2">实有人口年龄结构</h2>
  85. <!-- <div id="pleftbox2midd" class="pleftbox2middcont"></div> -->
  86. <div class="pvr fl lpeftb2otcont1 hdtop" style=" height:82%;" >
  87. <ul>
  88. <li class="hot1">1</li>
  89. <li class="hot2">2</li>
  90. <li class="hot3">3</li>
  91. <li class="hot4">4</li>
  92. <li class="hot5">5</li>
  93. </ul>
  94. <div id="pleftbox2bott_cont"class="pleftbox2middcont" style=" height:100%;" ></div>
  95. </div>
  96. </div>
  97. <div class="lpeft2bot" >
  98. <h2 class="tith2 " >实有人口职业占比TOP5</h2>
  99. <div id="prbottom_box1"class="lpeftb2otcont" ></div>
  100. </div>
  101. </div>
  102. </div>
  103. <div class="mrbox prbox">
  104. <div class="hdmrbox_top">
  105. <div class="mrbox_top_midd">
  106. <div class="hdmrboxtm-mbox"><h2 class="tith2 pt1">地图分析</h2>
  107. <div class="lefttoday_tit font14" style=" height:13%"><p class="fl"><i class="ricontop redr">12</i>民事活动</p><p class="fr" ><i class="ricontop bluer">12</i>佛事活动</p></div>
  108. <div class="mrboxtm-map hdmrboxtm-map">
  109. <ul>
  110. <li class="bluer" style="top:28%;left:12%">15</li>
  111. <li class="redr" style="top:31%;left:18%">13</li>
  112. <!-- 石渠县-->
  113. <li class="bluer" style="top:31%;left:33%">15</li>
  114. <li class="redr" style="top:34%;left:36%">13</li>
  115. <!-- -->
  116. <li class="bluer" style="top:12%;left:43%">15</li>
  117. <li class="redr" style="top:15%;left:47%">13</li>
  118. <!-- -->
  119. <li class="bluer" style="top:22%;left:36%">15</li>
  120. <li class="redr" style="top:25%;left:41%">13</li>
  121. <!-- -->
  122. <li class="bluer" style="top:23%;left:57%">15</li>
  123. <li class="redr" style="top:16%;left:53%">13</li>
  124. <!-- -->
  125. <li class="bluer" style="top:26%;left:64%">15</li>
  126. <li class="redr" style="top:22%;left:67%">13</li>
  127. <!-- -->
  128. <li class="bluer" style="top:7%;left:68%">15</li>
  129. <li class="redr" style="top:15%;left:69%">13</li>
  130. <!-- 丹巴-->
  131. <li class="bluer" style="top:32%;left:77%">15</li>
  132. <li class="redr" style="top:35%;left:80%">13</li>
  133. <!-- 康定-->
  134. <li class="bluer" style="top:28%;left:81%">15</li>
  135. <li class="redr" style="top:27%;left:84%">13</li>
  136. <!-- 泸定-->
  137. <li class="bluer" style="top:34%;left:69%">15</li>
  138. <li class="redr" style="top:37%;left:73%">13</li>
  139. <!-- 雅江-->
  140. <li class="bluer" style="top:48%;left:87%">15</li>
  141. <li class="redr" style="top:47%;left:83%">13</li>
  142. <!-- 九龙-->
  143. <li class="bluer" style="top:48%;left:60%">15</li>
  144. <li class="redr" style="top:56%;left:62%">13</li>
  145. <!-- 理塘-->
  146. <li class="bluer" style="top:68%;left:60%">15</li>
  147. <li class="redr" style="top:70%;left:63%">13</li>
  148. <!-- 巴塘-->
  149. <li class="bluer" style="top:67%;left:67%">15</li>
  150. <li class="redr" style="top:67%;left:71%">13</li>
  151. <!-- 乡城-->
  152. <li class="bluer" style="top:82%;left:70%">15</li>
  153. <li class="redr" style="top:84%;left:73%">13</li>
  154. <!-- 得荣-->
  155. <li class="bluer" style="top:68%;left:60%">15</li>
  156. <li class="redr" style="top:70%;left:63%">13</li>
  157. <!-- 巴塘-->
  158. <li class="bluer" style="top:71%;left:78%">15</li>
  159. <li class="redr" style="top:74%;left:81%">13</li>
  160. <!-- 稻城-->
  161. <li class="bluer" style="top:31%;left:57%">15</li>
  162. <li class="redr" style="top:33%;left:53%">13</li>
  163. <li class="bluer" style="top:44%;left:47%">15</li>
  164. <li class="redr" style="top:48%;left:52%">13</li>
  165. </ul>
  166. </div>
  167. </div>
  168. <!-- map end-->
  169. <!-- <div class="pmrboxbottom"><h2 class="tith2 pt1">涉稳警情</h2>
  170. <div id="pmrboxbottom" class="pmrboxbottomcont" ></div>
  171. </div> -->
  172. <div class="mrbox_bottom_bott">
  173. <div class="rbottom_box1 hdwid"><h2 class="tith2">高危人员分类分析</h2>
  174. <div id="prbottom_box2" class="prbottom_box1cont"></div></div>
  175. <div class="rbottom_box2 hdwid"><h2 class="tith2">活动人口统计</h2>
  176. <div id="pleftbox2midd" class="prbottom_box1cont" ></div></div>
  177. </div>
  178. </div>
  179. <!-- mrbox_top_midd end -->
  180. <div class="mrbox_top_right">
  181. <div class="hdrightboxtop"><h2 class="tith2">今日活动提醒</h2>
  182. <div class="lefttoday_tit" style="height:4%"><p class="fl">状态:已调节</p><p class="fr">时间段:2018-06-10</p></div>
  183. <div class="left2_table hdleft2_table">
  184. <ul>
  185. <li>
  186. <p class="fl"><b>康定市公安局</b><br>
  187. 村名王某因为被隔壁邻居的狗咬了,产生了纠纷,村名报警。<br>
  188. </p>
  189. <p class="fr pt17">2018-06-22</p>
  190. </li>
  191. <li class="bg">
  192. <p class="fl"><b>康定市公安局</b><br>
  193. 村名王某因为被隔壁邻居的狗咬了,产生了纠纷,村名报警。<br>
  194. </p>
  195. <p class="fr pt17">2018-06-22</p>
  196. </li>
  197. <li>
  198. <p class="fl"><b>康定市公安局</b><br>
  199. 村名王某因为被隔壁邻居的狗咬了,产生了纠纷,村名报警。<br>
  200. </p>
  201. <p class="fr pt17">2018-06-22</p>
  202. </li>
  203. <li class="bg">
  204. <p class="fl"><b>康定市公安局</b><br>
  205. 村名王某因为被隔壁邻居的狗咬了,产生了纠纷,村名报警。<br>
  206. </p>
  207. <p class="fr pt17">2018-06-22</p>
  208. </li>
  209. <li>
  210. <p class="fl"><b>康定市公安局</b><br>
  211. 村名王某因为被隔壁邻居的狗咬了,产生了纠纷,村名报警。<br>
  212. </p>
  213. <p class="fr pt17">2018-06-22</p>
  214. </li>
  215. <li class="bg">
  216. <p class="fl"><b>康定市公安局</b><br>
  217. 村名王某因为被隔壁邻居的狗咬了,产生了纠纷,村名报警。<br>
  218. </p>
  219. <p class="fr pt17">2018-06-22</p>
  220. </li>
  221. <li>
  222. <p class="fl"><b>康定市公安局</b><br>
  223. 村名王某因为被隔壁邻居的狗咬了,产生了纠纷,村名报警。<br>
  224. </p>
  225. <p class="fr pt17">2018-06-22</p>
  226. </li>
  227. <li class="bg">
  228. <p class="fl"><b>康定市公安局</b><br>
  229. 村名王某因为被隔壁邻居的狗咬了,产生了纠纷,村名报警。<br>
  230. </p>
  231. <p class="fr pt17">2018-06-22</p>
  232. </li>
  233. <li>
  234. <p class="fl"><b>康定市公安局</b><br>
  235. 村名王某因为被隔壁邻居的狗咬了,产生了纠纷,村名报警。<br>
  236. </p>
  237. <p class="fr pt17">2018-06-22</p>
  238. </li>
  239. <li class="bg">
  240. <p class="fl"><b>康定市公安局</b><br>
  241. 村名王某因为被隔壁邻居的狗咬了,产生了纠纷,村名报警。<br>
  242. </p>
  243. <p class="fr pt17">2018-06-22</p>
  244. </li>
  245. <li>
  246. <p class="fl"><b>康定市公安局</b><br>
  247. 村名王某因为被隔壁邻居的狗咬了,产生了纠纷,村名报警。<br>
  248. </p>
  249. <p class="fr pt17">2018-06-22</p>
  250. </li>
  251. <li class="bg">
  252. <p class="fl"><b>康定市公安局</b><br>
  253. 村名王某因为被隔壁邻居的狗咬了,产生了纠纷,村名报警。<br>
  254. </p>
  255. <p class="fr pt17">2018-06-22</p>
  256. </li>
  257. </ul>
  258. </div>
  259. </div>
  260. <!-- <div class="mrbox_bottom">
  261. <div class="rbottom_box1"><h2 class="tith2">高危人员分类分析</h2>
  262. <div id="prbottom_box2" class="prbottom_box1cont"></div></div>
  263. <div class="rbottom_box2"><h2 class="tith2">活动人口统计</h2>
  264. <div id="pleftbox2midd" class="prbottom_box1cont" ></div></div>
  265. <div class="rbottom_box3"><h2 class="tith2 pt2">流动人口年龄分析</h2>
  266. <div id="prbottom_box3" class="prbottom_box1cont"></div></div>
  267. </div> -->
  268. </div>
  269. <script type="text/javascript">
  270. var myChart = echarts.init(document.getElementById('lpeftmidbot'));
  271. option = {
  272. backgroundColor: 'rgba(1,202,217,.2)',
  273. grid: {
  274. left:50,
  275. right:20,
  276. top:45,
  277. bottom:30
  278. },
  279. legend: {
  280. top:5,
  281. textStyle:{
  282. fontSize: 10,
  283. color:'rgba(255,255,255,.7)'
  284. },
  285. data:['男','女','总数']
  286. },
  287. // toolbox: {
  288. // feature: {
  289. // dataView: {show: true, readOnly: false},
  290. // magicType: {show: true, type: ['line', 'bar']},
  291. // restore: {show: true},
  292. // saveAsImage: {show: true}
  293. // }
  294. // },
  295. // legend: {
  296. // top:10,
  297. // left:10,
  298. // textStyle:{
  299. // fontSize: 10,
  300. // color:'rgba(255,255,255,.7)'
  301. // },
  302. // data:['男','女','总数']
  303. // },
  304. xAxis: [
  305. {
  306. type: 'category',
  307. axisLine:{
  308. lineStyle:{
  309. color:'rgba(255,255,255,.2)'
  310. }
  311. },
  312. splitLine:{
  313. lineStyle:{
  314. color:'rgba(255,255,255,.1)'
  315. }
  316. },
  317. axisLabel:{
  318. color:"rgba(255,255,255,.7)"
  319. },
  320. data: ['1','2','3','4','5','6','7','8','9','10','11','12'],
  321. axisPointer: {
  322. type: 'shadow'
  323. }
  324. }
  325. ],
  326. yAxis: [
  327. {
  328. type: 'value',
  329. name: '',
  330. min: 0,
  331. max: 250,
  332. interval: 50,
  333. axisLine:{
  334. lineStyle:{
  335. color:'rgba(255,255,255,.3)'
  336. }
  337. },
  338. splitLine:{
  339. lineStyle:{
  340. color:'rgba(255,255,255,.01)'
  341. }
  342. },
  343. axisLabel: {
  344. formatter: '{value}'
  345. }
  346. }
  347. ],
  348. series: [
  349. {
  350. name:'男',
  351. type:'bar',
  352. itemStyle: {
  353. normal: {
  354. color:'#00a0e9'
  355. // color: new echarts.graphic.LinearGradient(
  356. // 0, 0, 0, 1,
  357. // [
  358. // {offset: 0, color: '#b266ff'},
  359. // {offset: 1, color: '#121b87'}
  360. // ]
  361. // )
  362. }
  363. },
  364. 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]
  365. },
  366. {
  367. name:'女',
  368. type:'bar',
  369. itemStyle: {
  370. normal: {
  371. color:'#fff799'
  372. // color: new echarts.graphic.LinearGradient(
  373. // 0, 0, 0, 1,
  374. // [
  375. // {offset: 0, color: '#00f0ff'},
  376. // {offset: 1, color: '#032a72'}
  377. // ]
  378. // )
  379. }
  380. },
  381. 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]
  382. },
  383. {
  384. name:'总数',
  385. type:'bar',
  386. itemStyle: {
  387. normal: {
  388. color:'#6fcc8c'
  389. // color: new echarts.graphic.LinearGradient(
  390. // 0, 0, 0, 1,
  391. // [
  392. // {offset: 0, color: '#fffb34'},
  393. // {offset: 1, color: '#032a72'}
  394. // ]
  395. // )
  396. }
  397. },
  398. 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]
  399. }
  400. ]
  401. };
  402. myChart.setOption(option);
  403. </script>
  404. <script type="text/javascript">
  405. var myChart = echarts.init(document.getElementById('lpeftbot'));
  406. option = {
  407. color:['#00b7ee','#f8e19a', '#f19ec2', '#5ebbeb', '#d16ad8','#f8e19a', '#00b7ee', '#81dabe','#5fc5ce'],
  408. backgroundColor: 'rgba(1,202,217,.2)',
  409. grid: {
  410. left:20,
  411. right:20,
  412. top:0,
  413. bottom:20
  414. },
  415. legend: {
  416. top:10,
  417. textStyle:{
  418. fontSize: 10,
  419. color:'rgba(255,255,255,.7)'
  420. },
  421. data:['佛事活动','民俗活动','其他活动']
  422. },
  423. series : [
  424. {
  425. name: '访问来源',
  426. type: 'pie',
  427. radius : '55%',
  428. center: ['50%', '55%'],
  429. data:[
  430. {value:335, name:'佛事活动'},
  431. {value:310, name:'民俗活动'},
  432. {value:370, name:'其他活动'}
  433. ],
  434. itemStyle: {
  435. emphasis: {
  436. shadowBlur: 10,
  437. shadowOffsetX: 0,
  438. shadowColor: 'rgba(0, 0, 0, 0.5)'
  439. }
  440. }
  441. }
  442. ]
  443. };
  444. myChart.setOption(option);
  445. </script>
  446. <script type="text/javascript">
  447. var myChart = echarts.init(document.getElementById('pleftbox2top'));
  448. option = {
  449. color:['#d2d17c','#00b7ee', '#5578cf', '#5ebbeb', '#d16ad8','#f8e19a', '#00b7ee', '#81dabe','#5fc5ce'],
  450. backgroundColor: 'rgba(1,202,217,.2)',
  451. grid: {
  452. left:20,
  453. right:20,
  454. top:0,
  455. bottom:20
  456. },
  457. legend: {
  458. top:10,
  459. textStyle:{
  460. fontSize: 10,
  461. color:'rgba(255,255,255,.7)'
  462. },
  463. data:['藏族','回族','彝族','汉族','土家族']
  464. },
  465. series : [
  466. {
  467. name: '访问来源',
  468. type: 'pie',
  469. radius : '55%',
  470. center: ['50%', '55%'],
  471. data:[
  472. {value:335, name:'藏族'},
  473. {value:310, name:'回族'},
  474. {value:234, name:'彝族'},
  475. {value:135, name:'汉族'},
  476. {value:158, name:'土家族'}
  477. ],
  478. itemStyle: {
  479. emphasis: {
  480. shadowBlur: 10,
  481. shadowOffsetX: 0,
  482. shadowColor: 'rgba(0, 0, 0, 0.5)'
  483. }
  484. }
  485. }
  486. ]
  487. };
  488. myChart.setOption(option);
  489. </script>
  490. <script type="text/javascript">
  491. var myChart = echarts.init(document.getElementById('pleftbox2midd'));
  492. option = {
  493. color:['#f8e19a','#00b7ee', '#5578cf', '#5ebbeb', '#d16ad8','#f8e19a', '#00b7ee', '#81dabe','#5fc5ce'],
  494. backgroundColor: 'rgba(1,202,217,.2)',
  495. grid: {
  496. left:20,
  497. right:20,
  498. top:0,
  499. bottom:20
  500. },
  501. legend: {
  502. top:10,
  503. textStyle:{
  504. fontSize: 10,
  505. color:'rgba(255,255,255,.7)'
  506. },
  507. data:['常住人口','活动人口']
  508. },
  509. series : [
  510. {
  511. name: '访问来源',
  512. type: 'pie',
  513. radius : '55%',
  514. center: ['50%', '65%'],
  515. data:[
  516. {value:335, name:'常住人口'},
  517. {value:310, name:'活动人口'}
  518. ],
  519. itemStyle: {
  520. emphasis: {
  521. shadowBlur: 10,
  522. shadowOffsetX: 0,
  523. shadowColor: 'rgba(0, 0, 0, 0.5)'
  524. }
  525. }
  526. }
  527. ]
  528. };
  529. myChart.setOption(option);
  530. </script>
  531. <script type="text/javascript">
  532. var myChart = echarts.init(document.getElementById('pmrboxbottom'));
  533. option = {
  534. color:['#d2d17c','#00b7ee', '#5578cf', '#5ebbeb', '#d16ad8','#f8e19a', '#00b7ee', '#81dabe','#5fc5ce'],
  535. backgroundColor: 'rgba(1,202,217,.2)',
  536. legend: {
  537. top:10,
  538. textStyle:{
  539. fontSize: 10,
  540. color:'rgba(255,255,255,.7)'
  541. },
  542. data:['涉恐人员','涉稳人员','涉毒人员','在逃人员','重点上访人员','肇事肇祸精神病人','刑事犯罪前科人员']
  543. },
  544. grid: {
  545. left: 10,
  546. right: 10,
  547. top: 40,
  548. bottom: 10,
  549. containLabel: true
  550. },
  551. xAxis : [
  552. {
  553. type : 'category',
  554. axisLine:{
  555. lineStyle:{
  556. color:'rgba(255,255,255,.3)'
  557. }
  558. },
  559. splitLine:{
  560. lineStyle:{
  561. color:'rgba(255,255,255,.01)'
  562. }
  563. },
  564. data : ['康定市','泸定县','丹巴县','九龙县','新龙县','巴塘县','得荣县','理塘县','甘孜县','道孚县','德格县','色达县']
  565. }
  566. ],
  567. yAxis : [
  568. {
  569. axisLine:{
  570. lineStyle:{
  571. color:'rgba(255,255,255,.3)'
  572. }
  573. },
  574. splitLine:{
  575. lineStyle:{
  576. color:'rgba(255,255,255,.01)'
  577. }
  578. },
  579. axisLabel: {
  580. formatter: '{value} ml'
  581. },
  582. type : 'value'
  583. }
  584. ],
  585. series : [
  586. {
  587. name:'涉恐人员',
  588. type:'bar',
  589. barWidth :30,
  590. stack: '搜索引擎',
  591. data:[620, 732, 701, 734, 1090, 1130, 1120,620, 732, 701, 734, 1090,]
  592. },
  593. {
  594. name:'涉稳人员',
  595. type:'bar',
  596. stack: '搜索引擎',
  597. data:[120, 132, 101, 134, 290, 230, 220, 101, 134, 290, 230, 220]
  598. },
  599. {
  600. name:'涉毒人员',
  601. type:'bar',
  602. stack: '搜索引擎',
  603. data:[60, 72, 71, 74, 190, 130, 110, 71, 74, 190, 130, 110]
  604. },
  605. ,
  606. {
  607. name:'在逃人员',
  608. type:'bar',
  609. stack: '搜索引擎',
  610. data:[120, 132, 101, 134, 290, 230, 220, 101, 134, 290, 230, 220]
  611. },
  612. {
  613. name:'重点上访人员',
  614. type:'bar',
  615. stack: '搜索引擎',
  616. data:[60, 72, 71, 74, 190, 130, 110, 71, 74, 190, 130, 110]
  617. },
  618. {
  619. name:'肇事肇祸精神病人',
  620. type:'bar',
  621. stack: '搜索引擎',
  622. data:[60, 72, 71, 74, 190, 130, 110, 71, 74, 190, 130, 110]
  623. },
  624. {
  625. name:'重大刑事犯罪前科人员',
  626. type:'bar',
  627. stack: '搜索引擎',
  628. data:[62, 82, 91, 84, 109, 110, 120, 91, 84, 109, 110, 120]
  629. }
  630. ]
  631. };
  632. myChart.setOption(option);
  633. </script>
  634. <script type="text/javascript">
  635. var myChart = echarts.init(document.getElementById('pleftbox2bott_cont'));
  636. option = {
  637. color:['#7ecef4'],
  638. backgroundColor: 'rgba(1,202,217,.2)',
  639. grid: {
  640. left:40,
  641. right:20,
  642. top:30,
  643. bottom:0,
  644. containLabel: true
  645. },
  646. xAxis: {
  647. type: 'value',
  648. axisLine:{
  649. lineStyle:{
  650. color:'rgba(255,255,255,0)'
  651. }
  652. },
  653. splitLine:{
  654. lineStyle:{
  655. color:'rgba(255,255,255,0)'
  656. }
  657. },
  658. axisLabel:{
  659. color:"rgba(255,255,255,0)"
  660. },
  661. boundaryGap: [0, 0.01]
  662. },
  663. yAxis: {
  664. type: 'category',
  665. axisLine:{
  666. lineStyle:{
  667. color:'rgba(255,255,255,.5)'
  668. }
  669. },
  670. splitLine:{
  671. lineStyle:{
  672. color:'rgba(255,255,255,.1)'
  673. }
  674. },
  675. axisLabel:{
  676. color:"rgba(255,255,255,.5)"
  677. },
  678. data: ['务农','建筑工','技工','销售','职工']
  679. },
  680. series: [
  681. {
  682. name: '2011年',
  683. type: 'bar',
  684. barWidth :20,
  685. itemStyle: {
  686. normal: {
  687. color: new echarts.graphic.LinearGradient(
  688. 1, 0, 0, 1,
  689. [
  690. {offset: 0, color: 'rgba(230,253,139,.7)'},
  691. {offset: 1, color: 'rgba(41,220,205,.7)'}
  692. ]
  693. )
  694. }
  695. },
  696. data: [18203, 23489, 29034, 104970, 131744]
  697. }
  698. ]
  699. };
  700. myChart.setOption(option);
  701. </script>
  702. <script type="text/javascript">
  703. var myChart = echarts.init(document.getElementById('prbottom_box1'));
  704. option = {
  705. color:['#d2d17c','#7fd7b1', '#5578cf', '#5ebbeb', '#d16ad8','#f8e19a', '#00b7ee', '#81dabe','#5fc5ce'],
  706. backgroundColor: 'rgba(1,202,217,.2)',
  707. grid: {
  708. left:20,
  709. right:30,
  710. top:0,
  711. bottom:20
  712. },
  713. legend: {
  714. top: 5,
  715. textStyle:{
  716. fontSize:10,
  717. color:'rgba(255,255,255,.6)'
  718. },
  719. data:['男','女','总数']
  720. },
  721. grid: {
  722. left:20,
  723. right:30,
  724. top:40,
  725. bottom:10,
  726. containLabel: true
  727. },
  728. toolbox: {
  729. feature: {
  730. saveAsImage: {}
  731. }
  732. },
  733. xAxis: {
  734. type: 'category',
  735. boundaryGap: false,
  736. axisLine:{
  737. lineStyle:{
  738. color:'rgba(255,255,255,.2)'
  739. }
  740. },
  741. splitLine:{
  742. lineStyle:{
  743. color:'rgba(255,255,255,.1)'
  744. }
  745. },
  746. axisLabel:{
  747. color:"rgba(255,255,255,.7)"
  748. },
  749. data: ['0-6','6-18','18-28','28-55','55以上']
  750. },
  751. yAxis: {
  752. type: 'value',
  753. axisLine:{
  754. lineStyle:{
  755. color:'rgba(255,255,255,.2)'
  756. }
  757. },
  758. splitLine:{
  759. lineStyle:{
  760. color:'rgba(255,255,255,.1)'
  761. }
  762. },
  763. axisLabel:{
  764. color:"rgba(255,255,255,.7)"
  765. },
  766. },
  767. series: [
  768. {
  769. name:'男',
  770. type:'line',
  771. stack: '总量',
  772. areaStyle: {normal: {}},
  773. data:[120, 132, 101, 134, 90]
  774. },
  775. {
  776. name:'女',
  777. type:'line',
  778. stack: '总量',
  779. data:[220, 182, 191, 234, 290]
  780. },
  781. {
  782. name:'总数',
  783. type:'line',
  784. stack: '总量',
  785. data:[150, 232, 201, 154, 190]
  786. }
  787. ]
  788. };
  789. myChart.setOption(option);
  790. </script>
  791. <script type="text/javascript">
  792. var myChart = echarts.init(document.getElementById('prbottom_box2'));
  793. option = {
  794. backgroundColor: 'rgba(1,202,217,.2)',
  795. color:['#7ecef4','#7fd7b1'],
  796. grid: {
  797. left:30,
  798. right:20,
  799. top:20,
  800. bottom:40
  801. },
  802. xAxis: {
  803. axisLine:{
  804. lineStyle:{
  805. color:'rgba(255,255,255,.7)'
  806. }
  807. },
  808. splitLine:{
  809. lineStyle:{
  810. color:'rgba(255,255,255,.1)'
  811. }
  812. },
  813. data: ['涉恐','涉稳','涉毒','重点','肇事','重大']
  814. },
  815. yAxis: {
  816. axisLine:{
  817. lineStyle:{
  818. color:'rgba(255,255,255,.2)'
  819. }
  820. },
  821. splitLine:{
  822. lineStyle:{
  823. color:'rgba(255,255,255,.1)'
  824. }
  825. }
  826. },
  827. series: [{
  828. symbolSize: 20,
  829. data: [
  830. [0.0, 8.04],
  831. [2.0, 6.95],
  832. [3.0, 7.58],
  833. [5.0, 8.81],
  834. [0.4, 8.33],
  835. [4.0, 1.96],
  836. [0.3, 7.24],
  837. [4.6, 4.26],
  838. [2.0, 4.84],
  839. [2.0, 4.82],
  840. [5.0, 5.68]
  841. ],
  842. type: 'scatter'
  843. }]
  844. };
  845. myChart.setOption(option);
  846. </script>
  847. <script type="text/javascript">
  848. var myChart = echarts.init(document.getElementById('prbottom_box3'));
  849. option = {
  850. backgroundColor: 'rgba(1,202,217,.2)',
  851. grid: {
  852. left:60,
  853. right:20,
  854. top:40,
  855. bottom:40
  856. },
  857. toolbox: {
  858. feature: {
  859. dataView: {show: true, readOnly: false},
  860. magicType: {show: true, type: ['line', 'bar']},
  861. restore: {show: true},
  862. saveAsImage: {show: true}
  863. }
  864. },
  865. legend: {
  866. top:10,
  867. textStyle:{
  868. fontSize: 10,
  869. color:'rgba(255,255,255,.7)'
  870. },
  871. data:['男','女','总数']
  872. },
  873. xAxis: [
  874. {
  875. type: 'category',
  876. axisLine:{
  877. lineStyle:{
  878. color:'rgba(255,255,255,.2)'
  879. }
  880. },
  881. splitLine:{
  882. lineStyle:{
  883. color:'rgba(255,255,255,.1)'
  884. }
  885. },
  886. axisLabel:{
  887. color:"rgba(255,255,255,.7)"
  888. },
  889. data: ['0-6','6-18','18-28','28-55','55以上'],
  890. axisPointer: {
  891. type: 'shadow'
  892. }
  893. }
  894. ],
  895. yAxis: [
  896. {
  897. type: 'value',
  898. name: '',
  899. min: 0,
  900. max: 250,
  901. interval: 50,
  902. axisLine:{
  903. lineStyle:{
  904. color:'rgba(255,255,255,.3)'
  905. }
  906. },
  907. splitLine:{
  908. lineStyle:{
  909. color:'rgba(255,255,255,.01)'
  910. }
  911. },
  912. axisLabel: {
  913. formatter: '{value} ml'
  914. }
  915. },
  916. {
  917. type: 'value',
  918. name: '',
  919. max: 25,
  920. interval: 5,
  921. axisLine:{
  922. lineStyle:{
  923. color:'rgba(255,255,255,0)'
  924. }
  925. },
  926. splitLine:{
  927. lineStyle:{
  928. color:'rgba(255,255,255,0)'
  929. }
  930. }
  931. }
  932. ],
  933. series: [
  934. {
  935. name:'男',
  936. type:'bar',
  937. itemStyle: {
  938. normal: {
  939. color: new echarts.graphic.LinearGradient(
  940. 0, 0, 0, 1,
  941. [
  942. {offset: 0, color: '#b266ff'},
  943. {offset: 1, color: '#121b87'}
  944. ]
  945. )
  946. }
  947. },
  948. data:[2.0, 4.9, 7.0, 23.2, 25.6]
  949. },
  950. {
  951. name:'女',
  952. type:'bar',
  953. itemStyle: {
  954. normal: {
  955. color: new echarts.graphic.LinearGradient(
  956. 0, 0, 0, 1,
  957. [
  958. {offset: 0, color: '#00f0ff'},
  959. {offset: 1, color: '#032a72'}
  960. ]
  961. )
  962. }
  963. },
  964. data:[8.6, 5.9, 9.0, 26.4, 28.7]
  965. },
  966. {
  967. name:'总数',
  968. type:'bar',
  969. itemStyle: {
  970. normal: {
  971. color: new echarts.graphic.LinearGradient(
  972. 0, 0, 0, 1,
  973. [
  974. {offset: 0, color: '#fffb34'},
  975. {offset: 1, color: '#032a72'}
  976. ]
  977. )
  978. }
  979. },
  980. yAxisIndex: 1,
  981. data:[6.0, 5.2, 3.3, 4.5, 6.3]
  982. }
  983. ]
  984. };
  985. myChart.setOption(option);
  986. </script>
  987. <script type="text/javascript">
  988. var myChart = echarts.init(document.getElementById('pmrmidd'));
  989. option = {
  990. color:['#f1ff00','#00c1ff', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
  991. // backgroundColor: 'rgba(1,202,217,.2)',
  992. grid: {
  993. left:20,
  994. right:20,
  995. top:30,
  996. bottom:30
  997. },
  998. radar: {
  999. name: {
  1000. textStyle: {
  1001. fontSize: 10,
  1002. color: 'rgba(255,255,255,.8)'
  1003. }
  1004. },
  1005. splitLine: {
  1006. lineStyle: {
  1007. color: [
  1008. 'rgba(1,202,217,.01)', 'rgba(1,202,217,.01)'
  1009. ].reverse()
  1010. }
  1011. },
  1012. splitArea: {
  1013. show: false
  1014. },
  1015. axisLine: {
  1016. lineStyle: {
  1017. color: 'rgba(1,202,217,.7)'
  1018. }
  1019. },
  1020. indicator: [
  1021. { name: '红色警情', max: 6500},
  1022. { name: '橙色警情', max: 16000},
  1023. { name: '黄色警情', max: 30000},
  1024. { name: '绿色警情', max: 44000}
  1025. ]
  1026. },
  1027. series: [{
  1028. name: '',
  1029. type: 'radar',
  1030. radius : [5, 100],
  1031. center: ['50%', '50%'],
  1032. data : [
  1033. {
  1034. value : [4300, 10000, 28000, 19000],
  1035. name : ''
  1036. },
  1037. {
  1038. value : [5000, 14000, 22000, 41000],
  1039. name : ''
  1040. }
  1041. ]
  1042. }]
  1043. };
  1044. myChart.setOption(option);
  1045. </script>
  1046. </body>
  1047. </html>