商丘12345 前端

huTotal.js 4.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. var token = $.cookie("token");
  2. var seriesData = []; //柱形图数据
  3. var date; //初始日期
  4. var arrNum = [];
  5. var myChart;
  6. var aa = true;
  7. //日期
  8. laydate.render({
  9. elem: '#chooseTime'
  10. ,format: 'yyyy-MM',
  11. type: 'month',
  12. theme: '#00a1cb'
  13. // value: new Date()
  14. });
  15. //tab切换
  16. $('.hu-tab li').click(function() {
  17. $(this).addClass('active')
  18. .siblings().removeClass('active');
  19. var index = $(this).index();
  20. $('.hu-content >div').eq(index).show()
  21. .siblings().hide();
  22. })
  23. $(document).ready(function() {
  24. //柱形图
  25. // 基于准备好的dom,初始化echarts实例
  26. myChart = echarts.init(document.getElementById('huData'));
  27. option = {
  28. color: ['#1ab394'],
  29. tooltip: {
  30. trigger: 'axis',
  31. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  32. type: 'line' // 默认为直线,可选为:'line' | 'shadow'
  33. }
  34. },
  35. toolbox: {
  36. show: true,
  37. },
  38. calculable: true,
  39. xAxis: [{
  40. type: 'category',
  41. name: '月份',
  42. splitLine: {
  43. show: false
  44. }, //去除网格线
  45. data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  46. axisTick: {
  47. alignWithLabel: true
  48. }
  49. }],
  50. yAxis: [{
  51. type: 'value',
  52. name: '通话量',
  53. nameLocation: 'end',
  54. splitLine: {
  55. show: false
  56. } //去除网格线
  57. }],
  58. series: [{
  59. name: '通话量',
  60. type: 'bar',
  61. barWidth: '30%', //图形宽度
  62. data: arrNum,
  63. itemStyle: {
  64. normal: {
  65. label: {
  66. show: true,
  67. textStyle: {
  68. color: '#800080' //顶部数据颜色
  69. }
  70. }
  71. }
  72. },
  73. label: {
  74. normal: {
  75. show: true,
  76. position: 'top' //顶部数据显示位置
  77. }
  78. }
  79. }
  80. ]
  81. };
  82. // 使用刚指定的配置项和数据显示图表。
  83. tu(date);
  84. myChart.setOption(option);
  85. // myChart.on('click', function(params) {
  86. // console.log(params);
  87. // if(params.componentType === 'series') {
  88. // if(params.dataIndex) {
  89. // console.log(params.data)
  90. // var month = params.name;
  91. // console.log(month);
  92. // }
  93. // }
  94. // });
  95. })
  96. Ajax(date);
  97. //搜索事件
  98. $(".sear").click(function() {
  99. $(".huTable tbody").html('');
  100. date = $("#chooseTime").val();
  101. Ajax(date);
  102. tu(date);
  103. myChart.setOption(option);
  104. });
  105. function Ajax(date) {
  106. $(".huTable tbody").html('');
  107. $.ajax({
  108. type: "get",
  109. url: huayi.config.callcenter_url + "TotalCall/GetDataList",
  110. async: true,
  111. dataType: 'json',
  112. data: {
  113. token: token,
  114. years: date
  115. },
  116. success: function(data) {
  117. var con = data.data;
  118. if(con == null) {
  119. // $(".huTable tbody").html('');
  120. $('<tr><td colspan="3">暂无数据</td></tr>').appendTo('.huTable tbody');
  121. } else {
  122. for(var i = 0; i < con.length; i++) {
  123. $('<tr><td>' + con[i].月份 + '</td><td>' + con[i].日期 + '</td><td>' + con[i].总数 + '</td></tr>').appendTo(".huTable tbody")
  124. }
  125. }
  126. }
  127. });
  128. }
  129. function tu(date) {
  130. var arr = [];
  131. $.ajax({
  132. type: "get",
  133. url: huayi.config.callcenter_url + "TotalCall/GetChartData",
  134. async: false,
  135. dataType: 'json',
  136. data: {
  137. token: token,
  138. years: date
  139. },
  140. success: function(data) {
  141. //console.log(data.data)
  142. arr = data.data;
  143. console.log(arr)
  144. }
  145. });
  146. arrNum = arr;
  147. console.log(arrNum);
  148. option.series[0].data = arrNum;
  149. }
  150. //导出
  151. $('.export').click(function() {
  152. dcexcel(this);
  153. })
  154. function dcexcel(obj) {
  155. var url = huayi.config.callcenter_url + "TotalCall/ExptList?token=" + $.cookie("token");
  156. url += "&years=" + $("#chooseTime").val();
  157. obj.href = url;
  158. }