伊川12345

huTotal.js 4.9KB

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