people.html 47 KB

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