weeklySalesSummary.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. $(function () {
  2. var data = {
  3. "echatX": [
  4. "2019-07-02",
  5. "2019-07-03",
  6. "2019-07-04",
  7. "2019-07-05",
  8. "2019-07-06",
  9. "2019-07-07",
  10. "2019-07-08",
  11. "2019-07-09",
  12. "2019-07-10",
  13. "2019-07-11",
  14. "2019-07-12",
  15. "2019-07-13",
  16. "2019-07-14",
  17. "2019-07-15"
  18. ],
  19. "echatY": [
  20. 501,210,123,333,445,157,151,369,101,101,350,435,153,100
  21. ],
  22. "echatY2": [
  23. 80,40,13,36,57,77,41,39,61,31,60,73,33,50
  24. ],
  25. "echatY3": [
  26. 5091,2210,1233,3133,4415,1517,1511,3619,1101,1011,3510,4315,1513,1100
  27. ],
  28. "echatY4": [
  29. 501,210,123,333,445,157,151,369,101,101,350,435,153,100
  30. ],
  31. "peopleTotal":15,"peopleOnline":4,"peopleOutline":12,"ranges":[]
  32. };
  33. dFun(data.echatX, data.echatY, data.echatY2,data.echatY3,data.echatY4);
  34. });
  35. var myChart;
  36. // 基于准备好的dom,初始化echarts实例
  37. var dChart = echarts.init(document.getElementById('main3'));
  38. // 指定图表的配置项和数据
  39. function dFun(dateList, totalNumberList, totalSalesList) {
  40. dChart.setOption({
  41. // title: {
  42. // left: 'left',
  43. // text: '概率',
  44. // show: false
  45. // },
  46. tooltip: {
  47. trigger: 'axis',
  48. // formatter: '{a}:{c}',
  49. axisPointer: {
  50. type: 'shadow',
  51. crossStyle: {
  52. color: '#999'
  53. }
  54. }
  55. },
  56. grid: {
  57. show: false,
  58. left: '3%',
  59. right: '4%',
  60. bottom: '10%'
  61. },
  62. // legend: {
  63. // show: true,
  64. // selectedMode: 'single', // 设置显示单一图例的图形,点击可切换
  65. // bottom: 10,
  66. // left: 50,
  67. // textStyle: {
  68. // color: '#666',
  69. // fontSize: 12
  70. // },
  71. // itemGap: 20,
  72. // inactiveColor: '#ccc'
  73. // },
  74. xAxis: {
  75. // splitLine: {     show: false   },
  76. type: 'category',
  77. data: dateList,
  78. axisPointer: {
  79. type: 'shadow'
  80. },
  81. // 改变x轴颜色
  82. axisLine: {
  83. lineStyle: {
  84. color: '#00a2e2',
  85. width: 1, // 这里是为了突出显示加上的
  86. }
  87. },
  88. axisTick: {
  89. show: true,
  90. interval: 0
  91. },
  92. },
  93. // 设置两个y轴,左边显示数量,右边显示概率
  94. yAxis: [{
  95. splitLine: {     show: false   },
  96. type: 'value',
  97. name: '销售量',
  98. // max: 10000,
  99. // min: 0,
  100. // show: true,
  101. // interval: 1000,
  102. // 改变y轴颜色
  103. axisLine: {
  104. lineStyle: {
  105. color: '#00a2e2',
  106. width: 1, // 这里是为了突出显示加上的
  107. }
  108. },
  109. }, // 右边显示概率
  110. {
  111. splitLine: {     show: false   },
  112. type: 'value',
  113. name: '销售额',
  114. // min: 0,
  115. // max: 100,
  116. // interval: 10,
  117. // 改变y轴颜色
  118. axisLine: {
  119. lineStyle: {
  120. color: '#00a2e2',
  121. width: 1, // 这里是为了突出显示加上的
  122. }
  123. }
  124. }],
  125. // 每个设备分数量、概率2个指标,只要让他们的name一致,即可通过,legeng进行统一的切换
  126. series: [{
  127. name: 'Units Sold',
  128. type: 'bar',
  129. symbol: 'circle', // 折线点设置为实心点
  130. symbolSize: 4, // 折线点的大小
  131. data: totalNumberList,
  132. barWidth: '20%',
  133. },{
  134. //折线
  135. name: 'Sales',
  136. type: 'line',
  137. symbol: 'circle', // 折线点设置为实心点
  138. symbolSize: 6, // 折线点的大小
  139. yAxisIndex: 1, // 这里要设置哪个y轴,默认是最左边的是0,然后1,2顺序来。
  140. data: totalSalesList,
  141. symbolSize: 10,
  142. itemStyle: {
  143. normal: {
  144. color: "#DDA0DD"
  145. }
  146. }
  147. },
  148. ]
  149. });
  150. }
  151. function queryWeekly(){
  152. var startWeek = document.getElementById("startWeek").value;
  153. var endWeek = document.getElementById("endWeek").value;
  154. var param = {
  155. startWeek:startWeek,
  156. endWeek:endWeek
  157. };
  158. console.log(param);
  159. // 折线图
  160. $.ajax({
  161. url: "../monthly/customersQueryByWeek",
  162. data: param,
  163. contentType:"application/x-www-form-urlencoded",
  164. type: 'POST',
  165. success: function(data) {
  166. dFun(data.dateList, data.totalNumberList, data.totalSalesList);
  167. },
  168. });
  169. }
  170. function exportWeekly(){
  171. var startWeek = document.getElementById("startWeek").value;
  172. var endWeek = document.getElementById("endWeek").value;
  173. var params = {
  174. startWeek:startWeek,
  175. endWeek:endWeek
  176. };
  177. console.log(params);
  178. exportFile('#rrapp', '../monthly/weeklySalesSummaryExport', params);
  179. }