民权县12345_前端

huTotal.js 4.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  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',
  11. type: 'year',
  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. 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. $(".huTable tbody").empty();
  117. if(con == null) {
  118. // $(".huTable tbody").html('');
  119. $('<tr><td colspan="3">暂无数据</td></tr>').appendTo('.huTable tbody');
  120. } else {
  121. for(var i = 0; i < con.length; i++) {
  122. $('<tr><td>' + con[i].月份 + '</td><td>' + con[i].日期 + '</td><td>' + con[i].总数 + '</td></tr>').appendTo(".huTable tbody")
  123. }
  124. }
  125. }
  126. });
  127. }
  128. function tu(date) {
  129. var arr = [];
  130. $.ajax({
  131. type: "get",
  132. url: huayi.config.callcenter_url + "TotalCall/GetChartData",
  133. async: false,
  134. dataType: 'json',
  135. data: {
  136. token: token,
  137. years: date
  138. },
  139. success: function(data) {
  140. //console.log(data.data)
  141. arr = data.data;
  142. }
  143. });
  144. arrNum = arr;
  145. option.series[0].data = arrNum;
  146. }
  147. //导出
  148. $('.export').click(function() {
  149. dcexcel(this);
  150. })
  151. function dcexcel(obj) {
  152. var url = huayi.config.callcenter_url + "TotalCall/ExptList?token=" + $.cookie("token");
  153. url += "&years=" + $("#chooseTime").val();
  154. obj.href = url;
  155. }