people.html 47 KB

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