虞城12345_前端

sourceChannel.js 8.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
  1. $(function() {
  2. laydate.render({
  3. elem: '#time2',
  4. range: '~',
  5. format: 'yyyy-MM-dd',
  6. theme: '#114a97',
  7. done: function(value, date) {
  8. partOne(value && value.split(' ~ ')[0], value && value.split(' ~ ')[1]);
  9. partTwo(value && value.split(' ~ ')[0], value && value.split(' ~ ')[1]);
  10. partThree(value && value.split(' ~ ')[0], value && value.split(' ~ ')[1]);
  11. }
  12. });
  13. Ajax();
  14. })
  15. //part 1 //受理群众区域统计 对接完毕
  16. var part_1 = echarts.init(document.getElementById('part_1'));
  17. part_1.setOption({
  18. color: ['#69e1a9', '#6a91e0', '#ceba5f', '#f06e84', '#569d4e', '#7d55ba', '#ce5aba', '#345cdd', '#569d4e'],
  19. tooltip: {
  20. trigger: 'axis',
  21. axisPointer: {
  22. type: 'cross',
  23. label: {
  24. show: true,
  25. backgroundColor: '#333'
  26. }
  27. }
  28. },
  29. grid: {
  30. left: '2%',
  31. right: '5%',
  32. bottom: '6%',
  33. containLabel: true
  34. },
  35. legend: {
  36. top: 'top',
  37. left: '180px',
  38. data: [],
  39. textStyle: {
  40. color: '#00e9ff'
  41. }
  42. },
  43. xAxis: {
  44. name: '时',
  45. data: [],
  46. axisLine: {
  47. lineStyle: {
  48. color: '#3061a2'
  49. }
  50. },
  51. axisTick: {
  52. alignWithLabel: true,
  53. show: false
  54. },
  55. axisLabel: { //横轴字体颜色
  56. show: true,
  57. textStyle: {
  58. color: '#eff0f4'
  59. }
  60. }
  61. },
  62. yAxis: {
  63. name: '(数量)',
  64. splitLine: {
  65. show: false
  66. },
  67. axisLine: {
  68. lineStyle: {
  69. color: '#3061a2'
  70. }
  71. },
  72. axisLabel: { //横轴字体颜色
  73. show: true,
  74. textStyle: {
  75. color: '#eff0f4'
  76. }
  77. }
  78. },
  79. series: []
  80. });
  81. function partOne(dates) {
  82. $.ajax({
  83. type: "get",
  84. url: huayi.config.callcenter_url + "info/GetAreaCount24ByDate",
  85. async: true,
  86. dataType: "json",
  87. data: {
  88. date: dates
  89. },
  90. success: function(data) {
  91. if(data.state.toLowerCase() == "success") {
  92. // layer.close(index);
  93. var con = data.data;
  94. var part1Axis = con.hours;
  95. var sers = []
  96. $(con.cols).each(function(i, n) {
  97. var obj = {};
  98. obj.name = n;
  99. obj.type = "line";
  100. obj.smooth = true;
  101. obj.showAllSymbol = true;
  102. obj.symbol = "emptyCircle";
  103. obj.symbolSize = 10;
  104. obj.data = con.counts[i];
  105. sers.push(obj);
  106. })
  107. part_1.setOption({
  108. xAxis: {
  109. data: part1Axis
  110. },
  111. legend: {
  112. data: con.cols
  113. },
  114. series: sers
  115. });
  116. }
  117. }
  118. });
  119. }
  120. //part2 //渠道来源
  121. var source = echarts.init(document.getElementById('source'));
  122. source.setOption({
  123. tooltip: {
  124. trigger: 'axis',
  125. axisPointer: {
  126. type: false,
  127. label: {
  128. show: true,
  129. backgroundColor: '#030917'
  130. }
  131. },
  132. },
  133. // legend: {
  134. // top: 'top',
  135. // left: '180px',
  136. // data: [],
  137. // textStyle: {
  138. // color: '#00e9ff'
  139. // }
  140. // },
  141. xAxis: {
  142. // name: '时',
  143. data: [],
  144. axisLine: {
  145. lineStyle: {
  146. color: '#3061a2'
  147. }
  148. },
  149. axisTick: {
  150. alignWithLabel: true,
  151. show: false
  152. },
  153. axisLabel: { //横轴字体颜色
  154. show: true,
  155. textStyle: {
  156. color: '#eff0f4'
  157. }
  158. }
  159. },
  160. yAxis: {
  161. name: '数量',
  162. splitLine: {
  163. show: false
  164. },
  165. axisLine: {
  166. lineStyle: {
  167. color: '#3061a2'
  168. }
  169. },
  170. axisLabel: { //横轴字体颜色
  171. show: true,
  172. textStyle: {
  173. color: '#eff0f4'
  174. }
  175. }
  176. },
  177. series: [{
  178. name: '数量',
  179. type: 'bar',
  180. barWidth: 18,
  181. itemStyle: {
  182. normal: {
  183. color: function(params) {
  184. // build a color map as your need.
  185. var colorList = ['#368cab','#54b793','#4b6ab0','#2531a9'];
  186. return colorList[params.dataIndex]
  187. }
  188. }
  189. },
  190. label: {
  191. normal: {
  192. show: true,
  193. position: 'top',//顶部数据显示位置
  194. textStyle: {
  195. color: '#fff' //顶部数据颜色
  196. },
  197. formatter: '{c}' // 这里是数据展示的时候显示的数据
  198. }
  199. },
  200. data: []
  201. }]
  202. });
  203. function partTwo(start,end) {
  204. $.ajax({
  205. type:"get",
  206. url: huayi.config.callcenter_url + "info/GetSourcePercentByDate",
  207. dataType: 'json',
  208. async: true,
  209. data:{
  210. start:start,
  211. end:end
  212. },
  213. success: function(data) {
  214. if(data.state.toLowerCase() == "success") {
  215. // layer.close(index);
  216. var con=data.data;
  217. var qd_legend = [];
  218. var ser_data = [];
  219. $(con).each(function(i, n) {
  220. ser_data.push(n.Count)
  221. qd_legend.push(n.Source);
  222. })
  223. source.setOption({
  224. // legend: {
  225. // data: qd_legend
  226. // },
  227. xAxis: {
  228. data: qd_legend
  229. },
  230. series: {
  231. data: ser_data
  232. }
  233. })
  234. }
  235. }
  236. });
  237. }
  238. // part3 受理区域统计
  239. var part3 = echarts.init(document.getElementById('part3'));
  240. part3.setOption({
  241. color: ['#6ce7ac', '#6a91e0', '#ceba5f', '#cb5f79', '#ae765a', '#569d4e','#7d55ba','#ce5aba','#355cdd','#44c1c6','#ceba5e','#c64444'],
  242. title: {
  243. text: '各乡镇街道占比',
  244. x: 'center',
  245. y: '45%',
  246. textStyle: {
  247. fontWeight: 'normal',
  248. fontSize: 14,
  249. color:'#fff'
  250. }
  251. },
  252. tooltip: {
  253. trigger: 'item',
  254. formatter: "{a} <br/>{b} : {c} ({d}%)",
  255. axisPointer: {
  256. crossStyle: {
  257. color: '#fff'
  258. }
  259. }
  260. },
  261. // legend: {
  262. // // orient: 'vertical',
  263. // bottom: 'bottom',
  264. // data: [],
  265. // textStyle: {
  266. // color: '#fff'
  267. // }
  268. // },
  269. series: [{
  270. name: '数据',
  271. type: 'pie',
  272. radius: ['30%', '60%'],
  273. center: ['50%', '50%'],
  274. data: [],
  275. itemStyle: {
  276. emphasis: {
  277. shadowBlur: 10,
  278. shadowOffsetX: 0,
  279. shadowColor: 'rgba(0, 0, 0, 0.5)'
  280. },
  281. normal: {
  282. label: {
  283. show: true,
  284. // formatter: '{b} : {c} ({d}%)'
  285. formatter: '{d}%'
  286. },
  287. labelLine: {
  288. show: true
  289. }
  290. }
  291. },
  292. label: {
  293. normal: {
  294. textStyle: {
  295. color: '#fff'
  296. }
  297. }
  298. }
  299. }]
  300. });
  301. function partThree(start, end) {
  302. // var index = layer.load(1, {
  303. // shade: [0.5, '#030303'] //0.1透明度的白色背景
  304. // });
  305. $.ajax({
  306. type: "get",
  307. url: huayi.config.callcenter_url + "info/GetAreaCountByDate",
  308. async: true,
  309. dataType: 'json',
  310. data: {
  311. start: start,
  312. end: end
  313. },
  314. success: function(data) {
  315. if(data.state.toLowerCase() == 'success') {
  316. // layer.close(index);
  317. $('.complaint_typeL').html('');
  318. $('.complaint_typeR').html('');
  319. var con = data.data;
  320. var part_1_legend = [];
  321. var part_1_ser = [];
  322. $(con).each(function(i, n) {
  323. if( n.AreaName.indexOf('当即办理') ==-1){
  324. part_1_legend.push(n.AreaName)
  325. var part_1_obj = {};
  326. part_1_obj.value = n.Count;
  327. part_1_obj.name = n.AreaName;
  328. part_1_ser.push(part_1_obj)
  329. if(n.AreaName.indexOf('城乡一体') != -1){
  330. n.AreaName="城乡示范"
  331. }
  332. var str='<li>' +
  333. '<span class="type_name">' + n.AreaName + '</span> <span class="type_count">' + n.Count + '</span>' +
  334. '</li>'
  335. if(i<=7){
  336. $(str).appendTo('.complaint_typeL');
  337. }else{
  338. $(str).appendTo('.complaint_typeR');
  339. }
  340. }
  341. })
  342. part3.setOption({
  343. // legend: {
  344. // selected: {
  345. // '当即办理': false
  346. // }
  347. // },
  348. series: [{
  349. data: part_1_ser
  350. }]
  351. })
  352. }
  353. }
  354. });
  355. }
  356. function Ajax(){
  357. partOne($('#time2').val()&& $('#time2').val().split(' ~ ')[0])
  358. partTwo($('#time2').val()&& $('#time2').val().split(' ~ ')[0],$('#time2').val() && $('#time2').val().split(' ~ ')[1]);
  359. partThree($('#time2').val() && $('#time2').val().split(' ~ ')[0], $('#time2').val() && $('#time2').val().split(' ~ ')[1])
  360. }