right_2.js 4.0 KB

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