Ei kuvausta

trafficDataBF.js 5.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. trafficDataChart('timeTraffic', daySeatName, callDate, callDate[0])
  2. $('.btn_time').click(function(e) {
  3. if(e.target.tagName == 'SPAN') {
  4. console.log("哈哈哈哈,点我揍你")
  5. if($(e.target).attr('data-state') == '1') {
  6. $('.daySeat').css('display', 'none')
  7. $('.timeTraffic').css('display', 'inline-block')
  8. $('#traffic').css('display', 'none')
  9. $('#timeTraffic').css('display', 'block')
  10. $('.act').html('当日数据')
  11. $('.call_situation h2').text('话务数据统计')
  12. trafficDataChart('timeTraffic', ['登陆坐席数量1', '呼叫排队数量1', '话务量1', '呼入接通量1'], callDate, callDate[0])
  13. trafficState = 0
  14. }
  15. }
  16. e.stopPropagation();
  17. })
  18. function trafficDataChart(dom, data, count, count1, rotate = 0) {
  19. let hotThings = echarts.init(document.getElementById("timeTraffic"));
  20. console.log(hotThings)
  21. window.onresize = function() {
  22. hotThings.resize()
  23. }
  24. option = {
  25. tooltip: {
  26. trigger: 'axis',
  27. axisPointer: {
  28. type: 'shadow'
  29. }
  30. },
  31. // tooltip: {
  32. // show: true,
  33. // formatter(params) {
  34. // if(params.value === '-') {
  35. // return `${params.name}: 0`;
  36. // }
  37. // return `${params.name}: ${params.value}`
  38. // }
  39. // },
  40. // legend: {
  41. // textStyle: {
  42. // fontSize: 12, //字体大小
  43. // color: '#ffffff' //字体颜色
  44. // },
  45. // lineStyle: {
  46. // color: '#ffffff'
  47. // }
  48. // },
  49. grid: {
  50. left: '3%',
  51. right: '4%',
  52. bottom: '3%',
  53. containLabel: true
  54. },
  55. xAxis: [{
  56. type: 'category',
  57. axisLine:{
  58. lineStyle:{
  59. color:'#ffffff'
  60. }
  61. },
  62. axisLabel: {
  63. show: true,
  64. textStyle: {
  65. color: '#ffffff'
  66. }
  67. },
  68. data: ['呼入量', '接通量', '呼入接通率', '呼出量', '呼出接通量', '呼出接通率']
  69. }],
  70. yAxis: [
  71. {
  72. type: 'value',
  73. axisLine:{
  74. lineStyle:{
  75. color:'#ffffff'
  76. }
  77. },
  78. // interval: 5,
  79. splitLine:{ show:false} ,
  80. // axisLine: {show: false},
  81. // axisTick: {show: false}
  82. },
  83. {
  84. type: 'value',
  85. axisLine:{
  86. lineStyle:{
  87. color:'#ffffff'
  88. }
  89. },
  90. // interval: 5,
  91. splitLine:{ show:false} ,
  92. min: 0,
  93. max: 100,
  94. axisLabel: {
  95. formatter: '{value} 100%'
  96. }
  97. }
  98. ],
  99. series: [{
  100. name: '呼入量',
  101. type: 'bar',
  102. stack: 'A',
  103. barWidth : 15,
  104. data: [320,{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}}]
  105. },
  106. {
  107. name: '未接通回拨量',
  108. type: 'bar',
  109. stack: 'A',
  110. barWidth : 15,
  111. data: [{value:0, itemStyle: {opacity: 0}},20,{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}}]
  112. },
  113. {
  114. name: '自助接听量',
  115. type: 'bar',
  116. stack: 'A',
  117. barWidth : 15,
  118. data: [{value:0, itemStyle: {opacity: 0}},80,{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}}]
  119. },
  120. {
  121. name: '人工接通量',
  122. type: 'bar',
  123. stack: 'A',
  124. barWidth : 15,
  125. data: [{value:0, itemStyle: {opacity: 0}},220,{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}}]
  126. },
  127. {
  128. name: '回拨率',
  129. type: 'bar',
  130. stack: 'A',
  131. yAxisIndex: 1,
  132. barWidth : 15,
  133. data: [{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}},20,{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}}]
  134. },
  135. {
  136. name: '自助率',
  137. type: 'bar',
  138. stack: 'A',
  139. yAxisIndex: 1,
  140. barWidth : 15,
  141. data: [{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}},30,{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}}]
  142. },
  143. {
  144. name: '人工率',
  145. type: 'bar',
  146. stack: 'A',
  147. yAxisIndex: 1,
  148. barWidth : 15,
  149. data: [{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}},50,{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}}]
  150. },
  151. {
  152. name: '呼出量',
  153. type: 'bar',
  154. stack: 'A',
  155. barWidth : 15,
  156. data: [{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}},150,{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}}]
  157. },
  158. {
  159. name: '呼出接通量',
  160. type: 'bar',
  161. stack: 'A',
  162. barWidth : 15,
  163. data: [{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}},150,{value:0, itemStyle: {opacity: 0}}]
  164. },
  165. {
  166. name: '呼出接通率',
  167. type: 'bar',
  168. stack: 'A',
  169. yAxisIndex: 1,
  170. barWidth :15,
  171. data: [{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}},{value:0, itemStyle: {opacity: 0}},99]
  172. },
  173. ]
  174. };
  175. hotThings.setOption(option);
  176. }