test-1920.js 27 KB

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