right_1.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. var myCharta = echarts.init(document.getElementById('right_1'), 'vintage');
  2. // var xData = function() {
  3. // var data = [];
  4. // for (var i = 1; i < 6; i++) {
  5. // data.push(i + "号库房");
  6. // }
  7. // return data;
  8. // }();
  9. nowList = [
  10. [709, 1917, 2455, 2610, 1719, ],
  11. [512, 332, 458, 734, 318, ],
  12. [422, 512, 832, 510, 1010, ],
  13. [418, 838, 316, 726, 514, ],
  14. [416, 510, 710, 838, 710, ],
  15. [428, 812, 432, 735, 417, ]
  16. ];
  17. outList = [
  18. [327, 1776, 507, 1200, 800, ],
  19. [714, 430, 626, 520, 430, ],
  20. [645, 454, 241, 736, 814, ],
  21. [762, 434, 820, 630, 1264],
  22. [416, 910, 710, 338, 510, ],
  23. [628, 412, 532, 335, 717, ]
  24. ]
  25. nameList = [
  26. ['1号库房', '2号库房', '3号库房', '4号库房', '5号库房'],
  27. ['6号库房', '7号库房', '8号库房', '9号库房', '10号库房'],
  28. ['11号库房', '12号库房', '13号库房', '14号库房', '15号库房'],
  29. ['16号库房', '17号库房', '18号库房', '19号库房', '20号库房'],
  30. ['21号库房', '22号库房', '23号库房', '24号库房', '25号库房'],
  31. ['26号库房', '27号库房', '28号库房', '29号库房', '30号库房'],
  32. ]
  33. sumList=[
  34. [1036,3693,2962,3810,2519],
  35. [1226,762,1084,1254,748],
  36. [1067,966,1073,1246,1824],
  37. [1180,1272,1136,1356,1778],
  38. [832,1420,1420,1176,1220,],
  39. [1056,1224,964,1070,1134]
  40. ]
  41. var a =-1;
  42. function autoChanges() {
  43. if(a<5){
  44. a+=1;
  45. }else{
  46. a=0;
  47. }
  48. var now = Math.ceil(a);
  49. var out = Math.ceil(a);
  50. var name = Math.ceil(a);
  51. var sum = Math.ceil(a);
  52. // var now = Math.ceil(a);
  53. // var out = Math.ceil(a);
  54. // var name = Math.ceil(a);
  55. // var sum = Math.ceil(a);
  56. option = {
  57. "tooltip": {
  58. "trigger": "axis",
  59. "axisPointer": {
  60. "type": "shadow",
  61. textStyle: {
  62. color: "#fff"
  63. }
  64. },
  65. },
  66. "grid": {
  67. "borderWidth": 0,
  68. "top": 65,
  69. "bottom": 80,
  70. textStyle: {
  71. color: "#fff"
  72. }
  73. },
  74. "legend": {
  75. x: '10%',
  76. top: '8%',
  77. textStyle: {
  78. color: '#fff',
  79. },
  80. "data": ['现有', '出库', '平均']
  81. },
  82. "calculable": true,
  83. "xAxis": [{
  84. "type": "category",
  85. "axisLine": {
  86. lineStyle: {
  87. color: '#90979c'
  88. }
  89. },
  90. "splitLine": {
  91. "show": false
  92. },
  93. "axisTick": {
  94. "show": false
  95. },
  96. "splitArea": {
  97. "show": false
  98. },
  99. "axisLabel": {
  100. "interval": 0,
  101. textStyle: {
  102. color: '#fff',
  103. },
  104. },
  105. "data": nameList[name],
  106. }],
  107. "yAxis": [{
  108. "type": "value",
  109. "splitLine": {
  110. "show": false
  111. },
  112. "axisLine": {
  113. lineStyle: {
  114. color: '#90979c'
  115. }
  116. },
  117. "axisTick": {
  118. "show": false
  119. },
  120. "axisLabel": {
  121. "interval": 0,
  122. textStyle: {
  123. color: '#fff',
  124. },
  125. },
  126. "splitArea": {
  127. "show": false
  128. },
  129. }],
  130. "dataZoom": [{
  131. "show": false,
  132. "height": 10,
  133. handleColor: '#0a4870',
  134. fillerColor: ' #0a4870',
  135. "xAxisIndex": [
  136. 0
  137. ],
  138. bottom: 30,
  139. "start": 10,
  140. "end": 100,
  141. handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
  142. handleSize: '110%',
  143. handleStyle: {
  144. color: "#0a4870",
  145. },
  146. textStyle: {
  147. color: "#fff"
  148. },
  149. borderColor: "#0a4870"
  150. }, {
  151. "type": "inside",
  152. "show": true,
  153. "height": 15,
  154. "start": 1,
  155. "end": 100
  156. }],
  157. "series": [{
  158. "name": "现有",
  159. "type": "bar",
  160. "stack": "总量",
  161. "barMaxWidth": 35,
  162. "barGap": "10%",
  163. "itemStyle": {
  164. "normal": {
  165. "color": "#0079fe",
  166. "label": {
  167. "show": true,
  168. "textStyle": {
  169. "color": "#fff"
  170. },
  171. "position": "inside",
  172. formatter: function (p) {
  173. return p.value > 0 ? (p.value) : '';
  174. }
  175. }
  176. }
  177. },
  178. "data": nowList[now],
  179. },
  180. {
  181. "name": "出库",
  182. "type": "bar",
  183. "stack": "总量",
  184. "itemStyle": {
  185. "normal": {
  186. "color": "#00a041",
  187. "barBorderRadius": 0,
  188. "label": {
  189. "show": true,
  190. "position": "inside",
  191. formatter: function (p) {
  192. return p.value > 0 ? (p.value) : '';
  193. }
  194. }
  195. }
  196. },
  197. "data": outList[out]
  198. }, {
  199. "name": "入库",
  200. "type": "line",
  201. symbolSize: 10,
  202. symbol: 'circle',
  203. "itemStyle": {
  204. "normal": {
  205. "color": "#00e4ff",
  206. "barBorderRadius": 0,
  207. "label": {
  208. "show": true,
  209. "position": "top",
  210. formatter: function (p) {
  211. return p.value > 0 ? (p.value) : '';
  212. }
  213. }
  214. }
  215. },
  216. "data": sumList[sum]
  217. },
  218. ]
  219. }
  220. myCharta.setOption(option);}
  221. autoChanges(); //初始化实例后,首次设置数据
  222. setInterval( //设置定时器,1s更新一次
  223. function () {
  224. autoChanges();
  225. }, 5000
  226. );