bar_model.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. //var datax=['1号店','2号店','3号店','4号店','5号店','6号店','7号店','8号店'];
  2. //var datay1=[3709, 2417, 755, 2610, 1719, 433, 2544, 4285];
  3. //var datay2=[386,386, 386, 122, 261, 171, 386, 40];
  4. //var datay3= [220, 376, 1727, 220, 220, 220, 220, 220];
  5. function setBar_ln(datax,datay1,datay2,datay3){
  6. var option = {
  7. "title": {
  8. "text": "人流环比图",
  9. "subtext": "昨天 vs 前天",
  10. "x": "center",
  11. show:false
  12. },
  13. "tooltip": {
  14. "trigger": "axis",
  15. "axisPointer": {
  16. "type": "shadow"
  17. },
  18. },
  19. "grid": {
  20. "borderWidth": 0,
  21. "y2": 40,
  22. "y":10
  23. },
  24. "legend": {
  25. "x": "right",
  26. "data": [ ]
  27. },
  28. "toolbox": {
  29. "show": false,
  30. "feature": {
  31. "restore": { },
  32. "saveAsImage": { }
  33. }
  34. },
  35. "calculable": true,
  36. "xAxis": [
  37. {
  38. "type": "category",
  39. "splitLine": {
  40. "show": false
  41. },
  42. "axisTick": {
  43. "show": false
  44. },
  45. "splitArea": {
  46. "show": false
  47. },
  48. "axisLabel": {
  49. "interval": 0,
  50. "rotate": -45,
  51. "show": true,
  52. "splitNumber": 15,
  53. "textStyle": {
  54. "fontFamily": "微软雅黑",
  55. "fontSize": 14,
  56. "color":'#00b2ff'
  57. }
  58. },
  59. "data": datax,
  60. }
  61. ],
  62. "yAxis": [
  63. {
  64. "type": "value",
  65. "splitLine": {
  66. "show": true,
  67. "lineStyle":{
  68. "color":'#2D68D0'
  69. }
  70. },
  71. "axisLine": {
  72. "show": false
  73. },
  74. "axisTick": {
  75. "show": false
  76. },
  77. "splitArea": {
  78. "show": false
  79. },
  80. "axisLabel": {
  81. "interval": 0,
  82. // "rotate": 45,
  83. "show": true,
  84. "splitNumber": 15,
  85. "textStyle": {
  86. "fontFamily": "微软雅黑",
  87. "fontSize": 16,
  88. "color":'#00b2ff'
  89. }
  90. },
  91. }
  92. ],
  93. // "dataZoom": [
  94. // {
  95. // "show": false,
  96. // "height": 30,
  97. // "xAxisIndex": [
  98. // 0
  99. // ],
  100. // bottom:40,
  101. // "start": 0,
  102. // "end": 80
  103. // },
  104. // {
  105. // "type": "inside",
  106. // "show": true,
  107. // "height": 15,
  108. // "xAxisIndex": [
  109. // 0
  110. // ],
  111. // "start": 1,
  112. // "end": 35
  113. // }
  114. // ],
  115. "series": [
  116. {
  117. "name": "昨日",
  118. "type": "bar",
  119. "stack": "总量",
  120. "barMaxWidth": 30,
  121. "barGap": "10%",
  122. "itemStyle": {
  123. "normal": {
  124. "barBorderRadius": 0,
  125. "color": new echarts.graphic.LinearGradient(0,0,0,1,[{
  126. offset:0,
  127. color:'rgba(15,108,193,.8)'
  128. },{
  129. offset:0.8,
  130. color:'rgba(3,70,118,1)'
  131. }
  132. ]),
  133. "label": {
  134. "show": true,
  135. "textStyle": {
  136. "color": "white"
  137. },
  138. "position": "insideTop",
  139. formatter : function(p) {
  140. return p.value > 0 ? (p.value ): '';
  141. }
  142. }
  143. }
  144. },
  145. "data": datay1,
  146. },
  147. {
  148. "name": "人流减少",
  149. "type": "bar",
  150. "stack": "总量",
  151. "itemStyle": {
  152. "normal": {
  153. "color": new echarts.graphic.LinearGradient(0,0,0,1,[{
  154. offset:0,
  155. color:'rgba(51,204,112,.5)'
  156. },{
  157. offset:0.8,
  158. color:'rgba(51,204,112,1)'
  159. }
  160. ]),
  161. "barBorderRadius": 0,
  162. "label": {
  163. "show": true,
  164. "textStyle": {
  165. "color": "white"
  166. },
  167. "position": "insideTop",
  168. formatter : function(p) {
  169. return p.value > 0 ? (
  170. p.value + '')
  171. : '';
  172. }
  173. }
  174. }
  175. },
  176. "data": datay2
  177. },
  178. {
  179. "name": "人流增长",
  180. "type": "bar",
  181. "stack": "总量",
  182. "itemStyle": {
  183. "normal": {
  184. "color": new echarts.graphic.LinearGradient(0,0,0,1,[{
  185. offset:0,
  186. color:'rgba(15,108,193,.8)'
  187. },{
  188. offset:0.8,
  189. color:'rgba(3,70,118,1)'
  190. }
  191. ]),
  192. "barBorderRadius": 0,
  193. "label": {
  194. "show": true,
  195. "textStyle": {
  196. "color": "white"
  197. },
  198. "position": "insideTop",
  199. formatter : function(p) {
  200. return p.value > 0 ? (
  201. p.value + '')
  202. : '';
  203. }
  204. }
  205. }
  206. },
  207. "data":datay3
  208. }
  209. ],
  210. animationDuration:7000,
  211. animationEasing:'elasticOut',
  212. animationDelayupdate:function(idx){
  213. return idx * 15;
  214. }
  215. }
  216. return option;
  217. }