activity.html 49 KB

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