test-1024.js 27 KB

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