Нет описания

trafficData0621.js 5.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
  1. getworkOrder()
  2. $('.btn_time').click(function(e) {
  3. if(e.target.tagName == 'SPAN') {
  4. if($(e.target).attr('data-state') == '1') {
  5. $(".hwsjtj").hide()
  6. $('.daySeat').css('display', 'none')
  7. $('.timeTraffic').css('display', 'inline-block')
  8. $('#traffic').css('display', 'none')
  9. $('#timeTraffic').css('display', 'block')
  10. $(this).siblings(".act").children("label").attr("indexTitle", "日话务数据统计1")
  11. $('.call_situation h2').text('话务数据统计')
  12. getworkOrder()
  13. trafficState = 0
  14. }
  15. }
  16. e.stopPropagation();
  17. })
  18. function getworkOrder() {
  19. let workOrderData = [];
  20. let workOrderName = []
  21. new doAjax({
  22. url: huayi.config.callcenter_url + "/InfoNew/GetTelCountByNow",
  23. data: {
  24. timetype: telCountByNowType
  25. },
  26. callBack: function(res) {
  27. var data = res.data.hw[0]
  28. console.log(data)
  29. trafficDataChart(data)
  30. }
  31. });
  32. }
  33. function getLabelOption(positionObj,numberType){
  34. var labelOption = {
  35. show: true,
  36. rotate: 0,
  37. align: 'center',
  38. color: '#fff',
  39. verticalAlign: 'middle',
  40. position: positionObj,
  41. formatter: function(params) {
  42. if(params.value > 0) {
  43. if(numberType){
  44. return params.value + "%";
  45. } else{
  46. return params.value;
  47. }
  48. } else {
  49. return ' ';
  50. }
  51. },
  52. fontSize: 12,
  53. };
  54. return labelOption
  55. }
  56. function trafficDataChart(getdata) {
  57. let hotThings = echarts.init(document.getElementById("timeTraffic"));
  58. window.onresize = function() {
  59. hotThings.resize()
  60. }
  61. hotThings.setOption(getOption());
  62. }
  63. function getOption(){
  64. return option = {
  65. tooltip: {
  66. trigger: 'item',
  67. show: true,
  68. // 进行数据处理
  69. formatter: function(params) {
  70. console.log(params, 'params')
  71. var html = '';
  72. if(params.value > 0) {
  73. html += params.marker;
  74. if(params.name.indexOf('率') >= 0) {
  75. html += params.seriesName + ': ' + params.value + '%<br/>';
  76. } else {
  77. html += params.seriesName + ': ' + params.value + '<br/>';
  78. }
  79. }
  80. return html;
  81. }
  82. },
  83. grid: {
  84. left: '3%',
  85. right: '4%',
  86. bottom: '15%',
  87. containLabel: true
  88. },
  89. xAxis: [{
  90. type: 'category',
  91. axisLine: {
  92. lineStyle: {
  93. color: '#ffffff'
  94. }
  95. },
  96. axisLabel: {
  97. show: true,
  98. rotate: 0, // 角度值:Number
  99. interval: '0',
  100. verticalAlign: 'left',
  101. fontSize: 12, // 顺便调小一点字体大小
  102. padding: [0, 0, 0, -10],
  103. textStyle: {
  104. color: '#ffffff'
  105. },
  106. formatter: function (value) {
  107. //x轴的文字改为竖版显示
  108. var str = value;
  109. if (value === "接通量呼入量") {
  110. str = "呼入量 接通量"
  111. } else if(value === "呼出接通量呼出量"){
  112. str = "呼出量 呼出接通量"
  113. }else if(value === "呼入接通率"){
  114. str = "呼入接通率"
  115. }else if(value === "呼出接通率"){
  116. str = " 呼出接通率"
  117. }
  118. return str
  119. }
  120. },
  121. data: ['接通量呼入量', '呼入接通率', '呼出接通量呼出量', '呼出接通率']
  122. }],
  123. yAxis: [{
  124. type: 'value',
  125. splitLine: {
  126. show: false
  127. },
  128. axisLine: {
  129. lineStyle: {
  130. color: '#ffffff'
  131. }
  132. }
  133. },
  134. {
  135. type: 'value',
  136. axisLine: {
  137. lineStyle: {
  138. color: '#ffffff'
  139. }
  140. },
  141. splitLine: {
  142. show: false
  143. },
  144. min: 0,
  145. max: 100,
  146. axisLabel: {
  147. formatter: '{value} %'
  148. }
  149. }
  150. ],
  151. color: ['#cd5c5c','#87cefa','#da70d6','#32cd32','#6495ed',
  152. '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0'],
  153. series: [
  154. {
  155. name: '呼出量',
  156. type: 'bar',
  157. barWidth: 15,
  158. label: getLabelOption(['50%', -5],0),
  159. emphasis: {
  160. focus: 'series'
  161. },
  162. data: [0, 0, getdata.hccount, 0]
  163. },
  164. {
  165. name: '有效来电',
  166. type: 'bar',
  167. stack: 'A',
  168. label: getLabelOption(['200%', 40],0),
  169. barWidth: 15,
  170. emphasis: {
  171. focus: 'series'
  172. },
  173. data: [getdata.effective, 0, 0, 0]
  174. },
  175. {
  176. name: '无效来电',
  177. type: 'bar',
  178. stack: 'A',
  179. label: getLabelOption(['200%', 20],0),
  180. barWidth: 15,
  181. emphasis: {
  182. focus: 'series'
  183. },
  184. data: [getdata.invalid, 0, 0, 0]
  185. },
  186. {
  187. name: '接通率',
  188. type: 'bar',
  189. stack: 'B',
  190. barWidth: 15,
  191. yAxisIndex: 1,
  192. label: getLabelOption(['250%', 60],1),
  193. emphasis: {
  194. focus: 'series'
  195. },
  196. data: [0, getdata.jtbili, 0, 0]
  197. },
  198. {
  199. name: '自助率',
  200. type: 'bar',
  201. stack: 'B',
  202. barWidth: 15,
  203. yAxisIndex: 1,
  204. label: getLabelOption(['250%', 40],1),
  205. emphasis: {
  206. focus: 'series'
  207. },
  208. data: [0, getdata.zzbili, 0, 0]
  209. },
  210. {
  211. name: '回拨率',
  212. type: 'bar',
  213. stack: 'B',
  214. barWidth: 15,
  215. yAxisIndex: 1,
  216. label: getLabelOption(['250%', 20],1),
  217. emphasis: {
  218. focus: 'series'
  219. },
  220. data: [0, getdata.hbbili, 0, 0]
  221. },
  222. {
  223. name: '呼出接通率',
  224. type: 'bar',
  225. barWidth: 15,
  226. yAxisIndex: 1,
  227. label: getLabelOption(['50%', -5],1),
  228. emphasis: {
  229. focus: 'series'
  230. },
  231. data: [0, 0, 0, getdata.hcbili]
  232. },
  233. {
  234. name: '人工接通',
  235. type: 'bar',
  236. stack: 'Ad',
  237. barWidth: 15,
  238. label: getLabelOption(['200%', 60],0),
  239. emphasis: {
  240. focus: 'series'
  241. },
  242. data: [getdata.jtcount, 0, 0, 0]
  243. },
  244. {
  245. name: '自助接通量',
  246. type: 'bar',
  247. stack: 'Ad',
  248. barWidth: 15,
  249. label: getLabelOption(['200%', 40],0),
  250. emphasis: {
  251. focus: 'series'
  252. },
  253. data: [getdata.zzcount, 0, 0, 0]
  254. },
  255. {
  256. name: '未接通回拨量',
  257. type: 'bar',
  258. stack: 'Ad',
  259. barWidth: 15,
  260. label: getLabelOption(['200%', 20],0),
  261. emphasis: {
  262. focus: 'series'
  263. },
  264. data: [getdata.hbcount, 0, 0, 0]
  265. },
  266. {
  267. name: '呼出接通量',
  268. type: 'bar',
  269. barWidth: 15,
  270. label: getLabelOption(['50%', -5],0),
  271. emphasis: {
  272. focus: 'series'
  273. },
  274. data: [0, 0, getdata.hcjtcount, 0]
  275. },
  276. ]
  277. };
  278. }