js.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299
  1.  $(window).load(function(){
  2. $(".loading").fadeOut()
  3. })
  4. /****/
  5. /****/
  6. $(document).ready(function(){
  7. var whei=$(window).width()
  8. $("html").css({fontSize:whei/20})
  9. $(window).resize(function(){
  10. var whei=$(window).width()
  11. $("html").css({fontSize:whei/20})
  12. });
  13. });
  14. $(function () {
  15. echarts_1()
  16. echarts_2()
  17. echarts_3()
  18. function echarts_1() {
  19. var myChart = echarts.init(document.getElementById('echart1'));
  20. option = {
  21. tooltip: {
  22. trigger: 'item',
  23. formatter: "{b} : {c} ({d}%)"
  24. },
  25. visualMap: {
  26. show: false,
  27. min: 500,
  28. max: 600,
  29. inRange: {
  30. //colorLightness: [0, 1]
  31. }
  32. },
  33. series: [{
  34. name: '分布',
  35. type: 'pie',
  36. radius: ['30%', '60%'],
  37. center: ['50%', '50%'],
  38. color: ['#f8b62c', '#FE5050', '#0086e5', '#57bc2f'],
  39. data: [{
  40. value: 70,
  41. name: '微信'
  42. },
  43. {
  44. value: 50,
  45. name: '支付宝'
  46. },
  47. {
  48. value: 20,
  49. name: '银行卡'
  50. },
  51. {
  52. value: 15,
  53. name: '其它'
  54. }
  55. ].sort(function(a, b) {
  56. return a.value - b.value
  57. }),
  58. roseType: 'radius',
  59. label: {
  60. normal: {
  61. formatter: ['{d|{d}%}', '{b|{b}}'].join('\n'),
  62. rich: {
  63. d: {
  64. color: 'rgb(241,246,104)',
  65. fontSize: 14,
  66. fontWeight:'bold',
  67. },
  68. b: {
  69. color: 'rgb(98,137,169)',
  70. fontSize: 12,
  71. },
  72. },
  73. }
  74. },
  75. labelLine: {
  76. normal: {
  77. lineStyle: {
  78. color: 'rgb(98,137,169)',
  79. },
  80. smooth: 0.2,
  81. length: 5,
  82. length2: 9,
  83. }
  84. },
  85. itemStyle: {
  86. normal: {
  87. shadowColor: 'rgba(0, 0, 0, 0.1)',
  88. shadowBlur: 50,
  89. }
  90. }
  91. }]
  92. };
  93. // 使用刚指定的配置项和数据显示图表。
  94. myChart.setOption(option);
  95. window.addEventListener("resize",function(){
  96. myChart.resize();
  97. });
  98. }
  99. function echarts_3() {
  100. // 基于准备好的dom,初始化echarts实例
  101. var myChart = echarts.init(document.getElementById('echart3'));
  102. option = {
  103. color: ['#1aa1ff', '#31c17b', '#ff6535'],
  104. tooltip: {
  105. trigger: 'axis',
  106. axisPointer: {
  107. type: 'shadow'
  108. }
  109. },
  110. grid: {
  111. left: '10',
  112. top:'10%',
  113. right: '0%',
  114. bottom: '3%',
  115. containLabel: true
  116. },
  117. xAxis: {
  118. data: ['2014', '2015', '2016', '2017', '2018', '2019'],
  119. axisLine: {show:false,},
  120. axisLabel: {
  121. color: 'rgba(255,255,255,.6)',
  122. fontSize: 14
  123. }
  124. },
  125. yAxis: {
  126. //name: "(人)",
  127. splitNumber:4,
  128. nameTextStyle: {
  129. color: 'rgba(255,255,255,.6)',
  130. fontSize: 14
  131. },
  132. axisLine: { show:false, },
  133. axisLabel: {
  134. color: 'rgba(255,255,255,.6)',
  135. fontSize: 14
  136. },
  137. splitLine: {
  138. lineStyle: {
  139. color: "rgba(255,255,255,.1)",
  140. type: "dotted"
  141. }
  142. },
  143. //interval:100,
  144. //max:500
  145. },
  146. series: [{
  147. type: 'bar',
  148. barWidth: '30',
  149. itemStyle: {
  150. normal: {
  151. barBorderRadius: 2,
  152. color: function(params) {
  153. var colorList = [
  154. '#0074c2','#00b59d','#00be2b','#abd300','#f4e000',
  155. '#ffab00','#ff7100','#f00c00','#c90061', '#c900c7','#C6E579','#F4E001','#F0805A','#26C0C0'
  156. ];
  157. return colorList[params.dataIndex]
  158. },
  159. label: {
  160. show: true,
  161. position: 'top',
  162. formatter: '{c}',
  163. color: 'rgba(255,255,255,.4)',
  164. fontSize: 12
  165. }
  166. }
  167. },
  168. data: [ 5, 12, 35, 100, 150, 235]
  169. }]
  170. };
  171. // 使用刚指定的配置项和数据显示图表。
  172. myChart.setOption(option);
  173. window.addEventListener("resize",function(){
  174. myChart.resize();
  175. });
  176. }
  177. function echarts_2() {
  178. // 基于准备好的dom,初始化echarts实例
  179. var myChart = echarts.init(document.getElementById('echart2'));
  180. option = {
  181. color: ['#1aa1ff', '#31c17b', '#ff6535'],
  182. tooltip: {
  183. trigger: 'axis',
  184. axisPointer: {
  185. type: 'shadow'
  186. }
  187. },
  188. grid: {
  189. left: '10',
  190. top:'10%',
  191. right: '0%',
  192. bottom: '3%',
  193. containLabel: true
  194. },
  195. xAxis: {
  196. data: ['商超', '零销', '餐饮', '百货', '其它'],
  197. axisLine: {show:false,},
  198. axisLabel: {
  199. color: 'rgba(255,255,255,.6)',
  200. fontSize: 14
  201. }
  202. },
  203. yAxis: {
  204. //name: "(人)",
  205. splitNumber:4,
  206. nameTextStyle: {
  207. color: 'rgba(255,255,255,.6)',
  208. fontSize: 14
  209. },
  210. axisLine: { show:false, },
  211. axisLabel: {
  212. color: 'rgba(255,255,255,.6)',
  213. fontSize: 14
  214. },
  215. splitLine: {
  216. lineStyle: {
  217. color: "rgba(255,255,255,.1)",
  218. type: "dotted"
  219. }
  220. },
  221. //interval:100,
  222. //max:500
  223. },
  224. series: [{
  225. type: 'bar',
  226. barWidth: '30',
  227. itemStyle: {
  228. normal: {
  229. barBorderRadius: 2,
  230. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  231. offset: 0,
  232. color: "#4693EC"
  233. },
  234. {
  235. offset: 1,
  236. color: "#00FFE3"
  237. }
  238. ]),
  239. label: {
  240. show: true,
  241. position: 'top',
  242. formatter: '{c}',
  243. color: 'rgba(255,255,255,.4)',
  244. fontSize: 12
  245. }
  246. },
  247. },
  248. data: [1250, 605, 264, 445, 125]
  249. }]
  250. };
  251. // 使用刚指定的配置项和数据显示图表。
  252. myChart.setOption(option);
  253. window.addEventListener("resize",function(){
  254. myChart.resize();
  255. });
  256. }
  257. })