test-1024.js 27 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165
  1. /****** PLACE YOUR CUSTOM STYLES HERE ******/
  2. var legal_person_data = {"uploadData":[{"count":630},{"count":986},{"count":792},{"count":642},{"count":521},{"count":573}
  3. ,{"count":832},{"count":747},{"count":983},{"count":836},{"count":831},{"count":633}],
  4. "updateData":[{"count":110},{"count":181},{"count":123},{"count":197},{"count":123},{"count":173}
  5. ,{"count":123},{"count":151},{"count":101},{"count":152},{"count":101},{"count":177}],
  6. "viewData":[{"count":651},{"count":842},{"count":223},{"count":223},{"count":221},{"count":812}
  7. ,{"count":928},{"count":219},{"count":613},{"count":254},{"count":981},{"count":301}]};
  8. var people_data = {"uploadData":[{"count":1300},{"count":1686},{"count":1692},{"count":1742},{"count":1621},{"count":773}
  9. ,{"count":832},{"count":1047},{"count":1483},{"count":1336},{"count":831},{"count":973}],
  10. "updateData":[{"count":103},{"count":281},{"count":203},{"count":197},{"count":173},{"count":154}
  11. ,{"count":223},{"count":251},{"count":201},{"count":252},{"count":201},{"count":277}],
  12. "viewData":[{"count":651},{"count":842},{"count":223},{"count":223},{"count":221},{"count":812}
  13. ,{"count":928},{"count":219},{"count":613},{"count":254},{"count":981},{"count":301}]};
  14. var picture_data = {"uploadData":[{"count":330},{"count":786},{"count":492},{"count":842},{"count":421},{"count":673}
  15. ,{"count":932},{"count":447},{"count":583},{"count":436},{"count":331},{"count":433}],
  16. "updateData":[{"count":10},{"count":81},{"count":23},{"count":97},{"count":23},{"count":73}
  17. ,{"count":23},{"count":51},{"count":01},{"count":52},{"count":01},{"count":77}],
  18. "viewData":[{"count":451},{"count":342},{"count":523},{"count":323},{"count":421},{"count":812}
  19. ,{"count":728},{"count":619},{"count":613},{"count":554},{"count":481},{"count":301}]};
  20. var Tpl1 = '<li>' +
  21. '<p class="data-count">5681</p>' +
  22. '<span class="data-name">数据总量</span>' +
  23. '</li>' +
  24. '<li>' +
  25. '<p class="data-count">1331</p>' +
  26. '<span class="data-name">更新量</span>' +
  27. '</li>' +
  28. '<li>' +
  29. '<p class="data-count">3753</p>' +
  30. '<span class="data-name">共享次数</span>' +
  31. '</li>' ;
  32. var Tpl2 = '<li>' +
  33. '<p class="data-count">3971</p>' +
  34. '<span class="data-name">数据总量</span>' +
  35. '</li>' +
  36. '<li>' +
  37. '<p class="data-count">1141</p>' +
  38. '<span class="data-name">更新量</span>' +
  39. '</li>' +
  40. '<li>' +
  41. '<p class="data-count">3753</p>' +
  42. '<span class="data-name">共享次数</span>' +
  43. '</li>' ;
  44. var Tpl3 = '<li>' +
  45. '<p class="data-count">4742</p>' +
  46. '<span class="data-name">数据总量</span>' +
  47. '</li>' +
  48. '<li>' +
  49. '<p class="data-count">1231</p>' +
  50. '<span class="data-name">更新量</span>' +
  51. '</li>' +
  52. '<li>' +
  53. '<p class="data-count">2983</p>' +
  54. '<span class="data-name">共享次数</span>' +
  55. '</li>' ;
  56. $('.com-screen-content .use-data').html(Tpl1);
  57. // 基于准备好的dom,初始化echarts实例
  58. var myChart1= echarts.init(document.getElementById('main1'));
  59. var myChart2 = echarts.init(document.getElementById('main2'));
  60. var myChart3 = echarts.init(document.getElementById('main3'));
  61. //var myChart4 = echarts.init(document.getElementById('main4'));
  62. var myChart5 = echarts.init(document.getElementById('main5'));
  63. var myChart6 = echarts.init(document.getElementById('main6'));
  64. var myChart7 = echarts.init(document.getElementById('main7'));
  65. getNowFormatDate();
  66. init_myChart1();
  67. init_myChart2();
  68. init_myChart3(legal_person_data);
  69. init_myChart5();
  70. init_myChart6();
  71. init_myChart7();
  72. function init_myChart3(data) {
  73. var uploadCnt = [];
  74. var updateCnt = [];
  75. var viewCnt = [];
  76. if (data.uploadData != null) {
  77. for (var i = 0; i < data.uploadData.length; i++) {
  78. uploadCnt.push(data.uploadData[i].count);
  79. }
  80. }
  81. if (data.updateData != null) {
  82. for (var i = 0; i < data.updateData.length; i++) {
  83. updateCnt.push(data.updateData[i].count);
  84. }
  85. }
  86. if (data.viewData != null) {
  87. for (var i = 0; i < data.viewData.length; i++) {
  88. viewCnt.push(data.viewData[i].count);
  89. }
  90. }
  91. option = {
  92. tooltip: {
  93. trigger: 'axis',
  94. formatter: function (params, ticket, callback) {
  95. var res = '';
  96. for (var i = 0, l = params.length; i < l; i++) {
  97. res += '' + params[i].seriesName + ' : ' + params[i].value + '<br>';
  98. }
  99. return res;
  100. },
  101. transitionDuration: 0,
  102. backgroundColor: 'rgba(83,93,105,0.8)',
  103. borderColor: '#535b69',
  104. borderRadius: 8,
  105. borderWidth: 2,
  106. padding: [5, 10],
  107. axisPointer: {
  108. type: 'line',
  109. lineStyle: {
  110. type: 'dashed',
  111. color: '#ffff00'
  112. }
  113. }
  114. },
  115. legend: {
  116. icon: 'circle',
  117. itemWidth: 8,
  118. itemHeight: 8,
  119. itemGap: 10,
  120. top: '16',
  121. right: '10',
  122. data: ['数据总量','共享次数','更新量'],
  123. textStyle: {
  124. fontSize: 10,
  125. color: '#a0a8b9'
  126. }
  127. },
  128. grid: {
  129. top: '46',
  130. left: '13%',
  131. right: '10',
  132. //bottom: '10%',
  133. containLabel: false
  134. },
  135. xAxis: [{
  136. type: 'category',
  137. boundaryGap: false,
  138. axisLabel: {
  139. interval: 0,
  140. fontSize:10
  141. },
  142. axisLine: {
  143. show: false,
  144. lineStyle: {
  145. color: '#a0a8b9'
  146. }
  147. },
  148. axisTick: {
  149. show: false
  150. },
  151. data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月'],
  152. offset: 10
  153. }],
  154. yAxis: [{
  155. type: 'value',
  156. axisLine: {
  157. show: false,
  158. lineStyle: {
  159. color: '#a0a8b9'
  160. }
  161. },
  162. axisLabel: {
  163. margin: 10,
  164. textStyle: {
  165. fontSize: 10
  166. }
  167. },
  168. splitLine: {
  169. lineStyle: {
  170. color: '#2b3646'
  171. }
  172. },
  173. axisTick: {
  174. show: false
  175. }
  176. }],
  177. series: [{
  178. name: '数据总量',
  179. type: 'line',
  180. smooth: true,
  181. showSymbol: false,
  182. lineStyle: {
  183. normal: {
  184. width: 2
  185. }
  186. },
  187. areaStyle: {
  188. normal: {
  189. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  190. offset: 0,
  191. color: 'rgba(137, 189, 27, 0.3)'
  192. }, {
  193. offset: 0.8,
  194. color: 'rgba(137, 189, 27, 0)'
  195. }], false),
  196. shadowColor: 'rgba(0, 0, 0, 0.1)',
  197. shadowBlur: 10
  198. }
  199. },
  200. itemStyle: {
  201. normal: {
  202. color: '#1cc840'
  203. }
  204. },
  205. data: uploadCnt
  206. }, {
  207. name: '共享次数',
  208. type: 'line',
  209. smooth: true,
  210. showSymbol: false,
  211. lineStyle: {
  212. normal: {
  213. width: 2
  214. }
  215. },
  216. areaStyle: {
  217. normal: {
  218. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  219. offset: 0,
  220. color: 'rgba(219, 50, 51, 0.3)'
  221. }, {
  222. offset: 0.8,
  223. color: 'rgba(219, 50, 51, 0)'
  224. }], false),
  225. shadowColor: 'rgba(0, 0, 0, 0.1)',
  226. shadowBlur: 10
  227. }
  228. },
  229. itemStyle: {
  230. normal: {
  231. color: '#eb5690'
  232. }
  233. },
  234. data: viewCnt
  235. }, {
  236. name: '更新量',
  237. type: 'line',
  238. smooth: true,
  239. showSymbol: false,
  240. lineStyle: {
  241. normal: {
  242. width: 2
  243. }
  244. },
  245. areaStyle: {
  246. normal: {
  247. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  248. offset: 0,
  249. color: 'rgba(0, 136, 212, 0.3)'
  250. }, {
  251. offset: 0.8,
  252. color: 'rgba(0, 136, 212, 0)'
  253. }], false),
  254. shadowColor: 'rgba(0, 0, 0, 0.1)',
  255. shadowBlur: 10
  256. }
  257. },
  258. itemStyle: {
  259. normal: {
  260. color: '#43bbfb'
  261. }
  262. },
  263. data: updateCnt
  264. }
  265. ]
  266. };
  267. myChart3.setOption(option);
  268. }
  269. function init_myChart2() {
  270. var data = {"uploadData":[{"count":3230},{"count":2986},{"count":3392},{"count":2642},{"count":3521},{"count":2573}
  271. ,{"count":3132},{"count":3147},{"count":3283},{"count":3336},{"count":3831},{"count":3633}],
  272. "updateData":[{"count":310},{"count":281},{"count":123},{"count":97},{"count":323},{"count":373}
  273. ,{"count":423},{"count":451},{"count":501},{"count":452},{"count":201},{"count":177}],
  274. "viewData":[{"count":1651},{"count":1842},{"count":2223},{"count":2123},{"count":2021},{"count":1812}
  275. ,{"count":1928},{"count":2019},{"count":2613},{"count":2754},{"count":2981},{"count":3001}]};
  276. var uploadCnt = [];
  277. var updateCnt = [];
  278. var viewCnt = [];
  279. if (data.uploadData != null) {
  280. for (var i = 0; i < data.uploadData.length; i++) {
  281. uploadCnt.push(data.uploadData[i].count);
  282. }
  283. }
  284. if (data.updateData != null) {
  285. for (var i = 0; i < data.updateData.length; i++) {
  286. updateCnt.push(data.updateData[i].count);
  287. }
  288. }
  289. if (data.viewData != null) {
  290. for (var i = 0; i < data.viewData.length; i++) {
  291. viewCnt.push(data.viewData[i].count);
  292. }
  293. }
  294. option = {
  295. tooltip: {
  296. trigger: 'axis',
  297. formatter: function (params, ticket, callback) {
  298. var res = '';
  299. for (var i = 0, l = params.length; i < l; i++) {
  300. res += '' + params[i].seriesName + ' : ' + params[i].value + '<br>';
  301. }
  302. return res;
  303. },
  304. transitionDuration: 0,
  305. backgroundColor: 'rgba(83,93,105,0.8)',
  306. borderColor: '#535b69',
  307. borderRadius: 8,
  308. borderWidth: 2,
  309. padding: [5, 10],
  310. axisPointer: {
  311. type: 'line',
  312. lineStyle: {
  313. type: 'dashed',
  314. color: '#ffff00'
  315. }
  316. }
  317. },
  318. legend: {
  319. icon: 'circle',
  320. itemWidth: 8,
  321. itemHeight: 8,
  322. itemGap: 10,
  323. top: '16',
  324. right: '10',
  325. data: ['数据总量','共享次数','更新量'],
  326. textStyle: {
  327. fontSize: 10,
  328. color: '#a0a8b9'
  329. }
  330. },
  331. grid: {
  332. top:'46',
  333. left: '13%',
  334. right: '10',
  335. //bottom: '10%',
  336. containLabel: false
  337. },
  338. xAxis: [{
  339. type: 'category',
  340. boundaryGap: false,
  341. axisLabel: {
  342. interval: 0,
  343. fontSize:10
  344. },
  345. axisLine: {
  346. show: false,
  347. lineStyle: {
  348. color: '#a0a8b9'
  349. }
  350. },
  351. axisTick: {
  352. show: false
  353. },
  354. data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月'],
  355. offset: 10
  356. }],
  357. yAxis: [{
  358. type: 'value',
  359. axisLine: {
  360. show: false,
  361. lineStyle: {
  362. color: '#a0a8b9'
  363. }
  364. },
  365. axisLabel: {
  366. margin: 10,
  367. textStyle: {
  368. fontSize: 10
  369. }
  370. },
  371. splitLine: {
  372. lineStyle: {
  373. color: '#2b3646'
  374. }
  375. },
  376. axisTick: {
  377. show: false
  378. }
  379. }],
  380. series: [{
  381. name: '数据总量',
  382. type: 'line',
  383. smooth: true,
  384. showSymbol: false,
  385. lineStyle: {
  386. normal: {
  387. width: 2
  388. }
  389. },
  390. areaStyle: {
  391. normal: {
  392. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  393. offset: 0,
  394. color: 'rgba(137, 189, 27, 0.3)'
  395. }, {
  396. offset: 0.8,
  397. color: 'rgba(137, 189, 27, 0)'
  398. }], false),
  399. shadowColor: 'rgba(0, 0, 0, 0.1)',
  400. shadowBlur: 10
  401. }
  402. },
  403. itemStyle: {
  404. normal: {
  405. color: '#1cc840'
  406. }
  407. },
  408. data: uploadCnt
  409. }, {
  410. name: '共享次数',
  411. type: 'line',
  412. smooth: true,
  413. showSymbol: false,
  414. lineStyle: {
  415. normal: {
  416. width: 2
  417. }
  418. },
  419. areaStyle: {
  420. normal: {
  421. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  422. offset: 0,
  423. color: 'rgba(219, 50, 51, 0.3)'
  424. }, {
  425. offset: 0.8,
  426. color: 'rgba(219, 50, 51, 0)'
  427. }], false),
  428. shadowColor: 'rgba(0, 0, 0, 0.1)',
  429. shadowBlur: 10
  430. }
  431. },
  432. itemStyle: {
  433. normal: {
  434. color: '#eb5690'
  435. }
  436. },
  437. data: viewCnt
  438. }, {
  439. name: '更新量',
  440. type: 'line',
  441. smooth: true,
  442. showSymbol: false,
  443. lineStyle: {
  444. normal: {
  445. width: 2
  446. }
  447. },
  448. areaStyle: {
  449. normal: {
  450. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  451. offset: 0,
  452. color: 'rgba(0, 136, 212, 0.3)'
  453. }, {
  454. offset: 0.8,
  455. color: 'rgba(0, 136, 212, 0)'
  456. }], false),
  457. shadowColor: 'rgba(0, 0, 0, 0.1)',
  458. shadowBlur: 10
  459. }
  460. },
  461. itemStyle: {
  462. normal: {
  463. color: '#43bbfb'
  464. }
  465. },
  466. data: updateCnt
  467. }
  468. ]
  469. };
  470. myChart2.setOption(option);
  471. }
  472. function init_myChart1(){
  473. option = {
  474. tooltip : {
  475. trigger: 'item',
  476. formatter: "{a} <br/>{b} : {c} ({d}%)"
  477. },
  478. color:['#8fc31f','#f35833','#00ccff','#ffcc00','#f5e965','#a74faf','#ff9668'],
  479. series : [
  480. {
  481. name: '资源总量构成',
  482. type: 'pie',
  483. radius : '20%',
  484. center: ['50%', '50%'],
  485. data:[
  486. {value:435, name:'公安局'},
  487. {value:679, name:'民政局'},
  488. {value:848, name:'气象局'},
  489. {value:348, name:'统计局'},
  490. {value:679, name:'交通局'},
  491. {value:848, name:'人社局'},
  492. {value:1348, name:'其他'}
  493. ],
  494. itemStyle: {
  495. emphasis: {
  496. shadowBlur: 10,
  497. shadowOffsetX: 0,
  498. shadowColor: 'rgba(0, 0, 0, 0.5)'
  499. }
  500. },
  501. itemStyle: {
  502. normal: {
  503. label:{
  504. show: true,
  505. // position:'inside',
  506. formatter: '{b} : {c} ({d}%)' ,
  507. fontSize : 8, //文字的字体大小
  508. }
  509. },
  510. labelLine :{show:true}
  511. }
  512. }
  513. ]
  514. };
  515. // 使用刚指定的配置项和数据显示图表。
  516. myChart1.setOption(option);
  517. }
  518. function init_myChart5(){
  519. //var XData=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
  520. //var yData=[1243,2315,1164,3021,3521,4121,2001,1983,2541,2612,2331,1992];
  521. var XData=["一月","二月","三月","四月","五月","六月","七月","八月","九月"];
  522. var yData=[1243,2315,1164,3021,3521,4121,2001,1983,1432];
  523. option = {
  524. backgroundColor:"",
  525. xAxis: {
  526. axisTick: {
  527. show: false
  528. },
  529. splitLine: {
  530. show: false
  531. },
  532. splitArea: {
  533. show: false
  534. },
  535. data: XData,
  536. axisLabel: {
  537. formatter: function(value) {
  538. var ret = ""; //拼接加\n返回的类目项
  539. var maxLength = 1; //每项显示文字个数
  540. var valLength = value.length; //X轴类目项的文字个数
  541. var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
  542. if (rowN > 1) //如果类目项的文字大于3,
  543. {
  544. for (var i = 0; i < rowN; i++) {
  545. var temp = ""; //每次截取的字符串
  546. var start = i * maxLength; //开始截取的位置
  547. var end = start + maxLength; //结束截取的位置
  548. //这里也可以加一个是否是最后一行的判断,但是不加也没有影响,那就不加吧
  549. temp = value.substring(start, end) + "\n";
  550. ret += temp; //凭借最终的字符串
  551. }
  552. return ret;
  553. } else {
  554. return value;
  555. }
  556. },
  557. interval: 0,
  558. fontSize: 10,
  559. fontWeight: 100,
  560. textStyle: {
  561. color: '#9faeb5',
  562. }
  563. },
  564. axisLine: {
  565. lineStyle: {
  566. color: '#4d4d4d'
  567. }
  568. }
  569. },
  570. yAxis: {
  571. axisTick: {
  572. show: false
  573. },
  574. splitLine: {
  575. show: false
  576. },
  577. splitArea: {
  578. show: false
  579. },
  580. axisLabel: {
  581. textStyle: {
  582. color: '#9faeb5',
  583. fontSize: 10,
  584. }
  585. },
  586. axisLine: {
  587. lineStyle: {
  588. color: '#4d4d4d'
  589. }
  590. }
  591. },
  592. "tooltip": {
  593. "trigger": "axis",
  594. transitionDuration: 0,
  595. backgroundColor: 'rgba(83,93,105,0.8)',
  596. borderColor: '#535b69',
  597. borderRadius: 8,
  598. borderWidth: 2,
  599. padding: [5, 10],
  600. formatter: function (params, ticket, callback) {
  601. var res = '';
  602. for (var i = 0, l = params.length; i < l; i++) {
  603. res += '' + params[i].seriesName + ' : ' + params[i].value + '<br>';
  604. }
  605. return res;
  606. },
  607. axisPointer: {
  608. type: 'line',
  609. lineStyle: {
  610. type: 'dashed',
  611. color: '#ffff00'
  612. }
  613. }
  614. },
  615. series: [{
  616. name:'共享次数',
  617. type:"bar",
  618. itemStyle: {
  619. normal: {
  620. color: {
  621. type: 'linear',
  622. x: 0,
  623. y: 0,
  624. x2: 0,
  625. y2: 1,
  626. colorStops: [{
  627. offset: 0,
  628. color: '#00d386' // 0% 处的颜色
  629. }, {
  630. offset: 1,
  631. color: '#0076fc' // 100% 处的颜色
  632. }],
  633. globalCoord: false // 缺省为 false
  634. },
  635. barBorderRadius: 15,
  636. }
  637. },
  638. label: {
  639. normal: {
  640. show: true,
  641. position: "top",
  642. textStyle: {
  643. color: "#ffc72b",
  644. fontSize: 10
  645. }
  646. }
  647. },
  648. data: yData,
  649. barWidth: 16,
  650. },{
  651. name:'折线',
  652. type:'line',
  653. itemStyle : { /*设置折线颜色*/
  654. normal : {
  655. /* color:'#c4cddc'*/
  656. }
  657. },
  658. data:yData
  659. }]
  660. };
  661. myChart5.setOption(option);
  662. }
  663. //刷新myChart5数据
  664. function init_myChart6(){
  665. var data = {"uploadData":[{"count":5421,"areaName":"公共服务"},{"count":6512,"areaName":"健康保障"},{"count":3721,"areaName":"安全生产"},{"count":2842,"areaName":"价格监督"}
  666. ,{"count":6427,"areaName":"能源安全"},{"count":4422,"areaName":"信用体系"},{"count":1020,"areaName":"城乡建设"},{"count":1421,"areaName":"社区治理"},{"count":1776,"areaName":"生态环保"}
  667. ,{"count":2428,"areaName":"应急维稳"}]};
  668. var uploadCnt = [];
  669. var updateCnt = [];
  670. //var collectionCnt = [];
  671. //var dailyCnt = [];
  672. var viewCnt = [];
  673. var areaNameS = [];
  674. if (data.uploadData) {
  675. for (var i = 0; i < data.uploadData.length; i++) {
  676. uploadCnt.push(data.uploadData[i].count);
  677. areaNameS.push(data.uploadData[i].areaName);
  678. }
  679. }
  680. if (data.updateData) {
  681. for (var i = 0; i < data.updateData.length; i++) {
  682. updateCnt.push(data.updateData[i].count);
  683. }
  684. }
  685. if (data.viewData) {
  686. for (var i = 0; i < data.viewData.length; i++) {
  687. viewCnt.push(data.viewData[i].count);
  688. }
  689. }
  690. option = {
  691. "tooltip": {
  692. "trigger": "axis",
  693. transitionDuration: 0,
  694. backgroundColor: 'rgba(83,93,105,0.8)',
  695. borderColor: '#535b69',
  696. borderRadius: 8,
  697. borderWidth: 2,
  698. padding: [5, 10],
  699. formatter: function (params, ticket, callback) {
  700. var res = '';
  701. for (var i = 0, l = params.length; i < l; i++) {
  702. res += '' + params[i].seriesName + ' : ' + params[i].value + '<br>';
  703. }
  704. return res;
  705. },
  706. axisPointer: {
  707. type: 'line',
  708. lineStyle: {
  709. type: 'dashed',
  710. color: '#ffff00'
  711. }
  712. }
  713. },
  714. "grid": {
  715. "top": '40',
  716. "left": '30',
  717. "right": '10',
  718. "bottom": '40',
  719. textStyle: {
  720. color: "#fff"
  721. }
  722. },
  723. "legend": {
  724. right: '24',
  725. top: "24",
  726. itemWidth: 8,
  727. itemHeight: 12,
  728. textStyle: {
  729. color: '#fff',
  730. fontSize:10
  731. },
  732. "data": ['资源总量'],
  733. },
  734. "calculable": true,
  735. xAxis: [{
  736. 'type': 'category',
  737. "axisTick": {
  738. "show": false
  739. },
  740. "axisLine": {
  741. "show": false,
  742. lineStyle: {
  743. color: '#868c96'
  744. }
  745. },
  746. "axisLabel": {
  747. "interval": 0,
  748. fontSize:10,
  749. formatter:function(value)
  750. {
  751. var ret = "";//拼接加\n返回的类目项
  752. var maxLength = 2;//每项显示文字个数
  753. var valLength = value.length;//X轴类目项的文字个数
  754. var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
  755. if (rowN > 1)//如果类目项的文字大于3,
  756. {
  757. for (var i = 0; i < rowN; i++) {
  758. var temp = "";//每次截取的字符串
  759. var start = i * maxLength;//开始截取的位置
  760. var end = start + maxLength;//结束截取的位置
  761. //这里也可以加一个是否是最后一行的判断,但是不加也没有影响,那就不加吧
  762. temp = value.substring(start, end) + "\n";
  763. ret += temp; //凭借最终的字符串
  764. }
  765. return ret;
  766. }
  767. else {
  768. return value;
  769. }
  770. }
  771. },
  772. "splitArea": {
  773. "show": false
  774. },
  775. 'data': areaNameS,
  776. splitLine: {
  777. show: false
  778. }
  779. }],
  780. "yAxis": [
  781. {
  782. "type": "value",
  783. offset: -14,
  784. "splitLine": {
  785. "show": false
  786. },
  787. "axisLine": {
  788. "show": false,
  789. lineStyle: {
  790. color: '#868c96'
  791. }
  792. },
  793. "axisTick": {
  794. "show": false
  795. },
  796. "axisLabel": {
  797. "interval": 0,
  798. fontSize:10
  799. },
  800. "splitArea": {
  801. "show": false
  802. }
  803. }],
  804. "series": [
  805. {
  806. "name": "资源总量",
  807. "type": "bar",
  808. "barGap": "10%",
  809. itemStyle: {//图形样式
  810. normal: {
  811. "color": '#4a4df0'
  812. }
  813. },
  814. label: {
  815. normal: {
  816. show: true,
  817. position: "top",
  818. textStyle: {
  819. color: "#ffc72b",
  820. fontSize: 10
  821. }
  822. }
  823. },
  824. "data": uploadCnt,
  825. barWidth: 14,
  826. },{
  827. name:'折线',
  828. type:'line',
  829. itemStyle : { /*设置折线颜色*/
  830. normal : {
  831. color:'#c7b198'
  832. }
  833. },
  834. data:[5421, 6512, 4621, 2842,6427, 4422,1020,1421,1776,2428],
  835. }
  836. ]
  837. };
  838. // 使用刚指定的配置项和数据显示图表。
  839. myChart6.setOption(option);
  840. }
  841. function init_myChart7(){
  842. var colorList = [
  843. '#ff2600',
  844. '#ffc000',
  845. '#00ad4e',
  846. '#0073c2',
  847. '#165868',
  848. '#e76f00',
  849. '#316194',
  850. '#723761',
  851. '#00b2f1',
  852. '#4d6022',
  853. '#4b83bf',
  854. '#f9c813',
  855. '#0176c0'
  856. ];
  857. var xData = ['公共服务','健康保障','安全生产','价格监督','能源安全','信用体系', '城乡建设', '社区治理', '生态环保','应急维稳'];
  858. var yData = [2912,3991,4621,3941,3313,6631,5543,4463,6541,3381];
  859. option = {
  860. color:colorList,
  861. "tooltip": {
  862. "trigger": "axis",
  863. transitionDuration: 0,
  864. backgroundColor: 'rgba(83,93,105,0.8)',
  865. borderColor: '#535b69',
  866. borderRadius: 8,
  867. borderWidth: 2,
  868. padding: [5, 10],
  869. formatter: function (params, ticket, callback) {
  870. var res = '';
  871. for (var i = 0, l = params.length; i < l; i++) {
  872. res += '' + params[i].seriesName + ' : ' + params[i].value + '<br>';
  873. }
  874. return res;
  875. },
  876. axisPointer: {
  877. type: 'line',
  878. lineStyle: {
  879. type: 'dashed',
  880. color: '#ffff00'
  881. }
  882. }
  883. },
  884. toolbox: {
  885. show : true,
  886. feature : {
  887. mark : {
  888. show: true
  889. },
  890. }
  891. },
  892. grid: {
  893. "borderWidth": 0,
  894. "top": '40',
  895. "left": '30',
  896. "right": '10',
  897. "bottom": '40',
  898. textStyle: {
  899. color: "#fff"
  900. }
  901. },
  902. xAxis : [
  903. {
  904. 'type': 'category',
  905. "axisTick": {
  906. "show": false
  907. },
  908. "axisLine": {
  909. "show": false,
  910. lineStyle: {
  911. color: '#868c96'
  912. }
  913. },
  914. "axisLabel": {
  915. "interval": 0,
  916. fontSize:10,
  917. formatter:function(value)
  918. {
  919. var ret = "";//拼接加\n返回的类目项
  920. var maxLength = 2;//每项显示文字个数
  921. var valLength = value.length;//X轴类目项的文字个数
  922. var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
  923. if (rowN > 1)//如果类目项的文字大于3,
  924. {
  925. for (var i = 0; i < rowN; i++) {
  926. var temp = "";//每次截取的字符串
  927. var start = i * maxLength;//开始截取的位置
  928. var end = start + maxLength;//结束截取的位置
  929. //这里也可以加一个是否是最后一行的判断,但是不加也没有影响,那就不加吧
  930. temp = value.substring(start, end) + "\n";
  931. ret += temp; //凭借最终的字符串
  932. }
  933. return ret;
  934. }
  935. else {
  936. return value;
  937. }
  938. }
  939. },
  940. "splitArea": {
  941. "show": false
  942. },
  943. 'data': xData,
  944. splitLine: {
  945. show: false
  946. },
  947. }
  948. ],
  949. yAxis : [
  950. {
  951. "type": "value",
  952. offset: -14,
  953. "splitLine": {
  954. "show": false
  955. },
  956. "axisLine": {
  957. "show": false,
  958. lineStyle: {
  959. color: '#868c96'
  960. }
  961. },
  962. "axisTick": {
  963. "show": false
  964. },
  965. "axisLabel": {
  966. "interval": 0,
  967. fontSize:10
  968. },
  969. "splitArea": {
  970. "show": false
  971. }
  972. }
  973. ],
  974. series : [
  975. {
  976. name:'共享次数',
  977. type:'bar',
  978. data:yData,
  979. itemStyle: {
  980. normal: {
  981. color: function(params) {
  982. // build a color map as your need.
  983. var colorList = [
  984. '#ff2600',
  985. '#ffc000',
  986. '#00ad4e',
  987. '#0073c2',
  988. '#165868',
  989. '#e76f00',
  990. '#316194',
  991. '#723761',
  992. '#00b2f1',
  993. '#4d6022',
  994. '#4b83bf',
  995. '#f9c813',
  996. '#0176c0'
  997. ];
  998. return colorList[params.dataIndex]
  999. },
  1000. }
  1001. },
  1002. barWidth: 14,
  1003. label: {
  1004. normal: {
  1005. show: true,
  1006. position: "top",
  1007. textStyle: {
  1008. color: "#ffc72b",
  1009. fontSize: 10
  1010. }
  1011. }
  1012. },
  1013. },
  1014. {
  1015. name:'折线',
  1016. type:'line',
  1017. itemStyle : { /*设置折线颜色*/
  1018. normal : {
  1019. color:'#d3d5fd'
  1020. }
  1021. },
  1022. data:yData
  1023. }
  1024. ]
  1025. };
  1026. // 使用刚指定的配置项和数据显示图表。
  1027. myChart7.setOption(option);
  1028. }
  1029. //获取当前时间
  1030. function getNowFormatDate() {
  1031. var date = new Date();
  1032. var year = date.getFullYear();
  1033. var month = date.getMonth() + 1;
  1034. var strDate = date.getDate();
  1035. var Hour = date.getHours(); // 获取当前小时数(0-23)
  1036. var Minute = date.getMinutes(); // 获取当前分钟数(0-59)
  1037. var Second = date.getSeconds(); // 获取当前秒数(0-59)
  1038. var show_day=new Array('星期日','星期一','星期二','星期三','星期四','星期五','星期六');
  1039. var day=date.getDay();
  1040. if (Hour<10) {
  1041. Hour = "0" + Hour;
  1042. }
  1043. if (Minute <10) {
  1044. Minute = "0" + Minute;
  1045. }
  1046. if (Second <10) {
  1047. Second = "0" + Second;
  1048. }
  1049. if (month >= 1 && month <= 9) {
  1050. month = "0" + month;
  1051. }
  1052. if (strDate >= 0 && strDate <= 9) {
  1053. strDate = "0" + strDate;
  1054. }
  1055. var currentdate = '<div><p>'+year + '年' + month +'月' + strDate+'号</p><p>'+show_day[day]+'</p></div>';
  1056. var HMS = Hour + ':' + Minute +':' + Second;
  1057. var temp_time = year+'-'+month+'-'+strDate+' '+HMS;
  1058. $('.nowTime li:nth-child(1)').html(HMS);
  1059. $('.nowTime li:nth-child(2)').html(currentdate);
  1060. //$('.topRec_List li div:nth-child(3)').html(temp_time);
  1061. setTimeout(getNowFormatDate,1000);//每隔1秒重新调用一次该函数
  1062. }
  1063. var resourceDataType = $('.data-label li.active').data('type');//用于切换基础库
  1064. function urlType() {
  1065. resourceDataType = $('.data-label li.active').data('type');
  1066. if (resourceDataType == 1) {
  1067. init_myChart3(legal_person_data);
  1068. $('.com-screen-content .use-data').html(Tpl1);
  1069. } else if (resourceDataType == 2) {
  1070. init_myChart3(people_data);
  1071. $('.com-screen-content .use-data').html(Tpl2);
  1072. } else if (resourceDataType == 3) {
  1073. init_myChart3( picture_data);
  1074. $('.com-screen-content .use-data').html(Tpl3);
  1075. }
  1076. }
  1077. var num =0 ;
  1078. // 资源类型定时器
  1079. function resourceType() {
  1080. $('.data-label li').eq(num).addClass('active').siblings().removeClass('active');
  1081. //$('.active-data-label').html($('.canvas-pic-two .data-label li.active').html());
  1082. urlType();
  1083. num++;
  1084. if (num >= 3) {
  1085. num = 0;
  1086. }
  1087. }
  1088. // 资源类型点击切换
  1089. $('.data-label').on('click', 'li', function () {
  1090. $(this).addClass('active').siblings().removeClass('active');
  1091. $('.active-data-label').html($('.data-label li.active').html());
  1092. urlType();
  1093. });
  1094. var oTimer = setInterval(resourceType, 3000);
  1095. // hover清除定时器
  1096. $('.data-label').hover(function () {
  1097. clearInterval(oTimer);
  1098. }, function () {
  1099. oTimer = setInterval(resourceType, 3000);
  1100. });
  1101. /*function resize(){
  1102. window.addEventListener("resize", () => {
  1103. this.myChart1.resize;
  1104. this.myChart2.resize;
  1105. this.myChart3.resize;
  1106. this.myChart5.resize;
  1107. this.myChart6.resize;
  1108. this.myChart7.resize;
  1109. });
  1110. }*/
  1111. setInterval(function (){
  1112. window.onresize = function () {
  1113. this.myChart1.resize;
  1114. this.myChart2.resize;
  1115. this.myChart3.resize;
  1116. this.myChart5.resize;
  1117. this.myChart6.resize;
  1118. this.myChart7.resize;
  1119. }
  1120. },200)
  1121. //myChart7.resize();