js.js 6.5 KB

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