商丘12345 前端

sourceChannel.js 8.3KB

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