option3.js 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. function option3 (name) {
  2. var count = 30;
  3. var key = name != 'pm25' ? name : 'pm2_5';
  4. var nameWorst = [];
  5. var dataWorst = data[name].slice(-count);
  6. for (var i = 0, l = dataWorst.length; i < l; i++) {
  7. nameWorst.push(dataWorst[i].name);
  8. }
  9. var nameBest = [];
  10. var dataBest = data[name].slice(0,count);
  11. dataBest.reverse();
  12. for (var i = 0, l = dataBest.length; i < l; i++) {
  13. dataBest[i] = {
  14. name: dataBest[i].name,
  15. value: - dataBest[i].value
  16. };
  17. nameBest.push(dataBest[i].name);
  18. }
  19. var option = {
  20. title : {
  21. text: '空气质量排行榜('+name+' 前后30名)',
  22. subtext: 'data from PM25.in',
  23. sublink: 'http://www.pm25.in',
  24. itemGap: 5,
  25. x:'center'
  26. },
  27. tooltip : {
  28. trigger: 'item'
  29. },
  30. toolbox: {
  31. show : true,
  32. //orient : 'vertical',
  33. //x: 'right',
  34. //y: 'center',
  35. feature : {
  36. mark : {show: true},
  37. dataView : {show: true, readOnly: false},
  38. //magicType: {show: true, type: ['line', 'bar']},
  39. restore : {show: true},
  40. saveAsImage : {show: true}
  41. }
  42. },
  43. dataRange: {
  44. orient: 'horizontal',
  45. precision: name != 'co' ? 0 : 2,
  46. min : data[name + 'Min'],
  47. max : data[name + 'Max'],
  48. text:['高','低'], // 文本,默认为数值文本
  49. calculable : true,
  50. x: '45%',
  51. y: 640,
  52. itemWidth:35,
  53. color: ['maroon','purple','red','orange','yellow','lightgreen'],
  54. textStyle:{
  55. color:'#fff'
  56. }
  57. },
  58. grid:{
  59. x: 0,
  60. y: 50,
  61. x2: 0,
  62. y2: 0,
  63. borderWidth:0
  64. },
  65. xAxis : [
  66. {
  67. type : 'value',
  68. position: 'top',
  69. splitLine: {show:false},
  70. axisLine: {show:false},
  71. axisLabel : {show:false},
  72. min: 0,
  73. max: data[name+'Max']
  74. },
  75. {
  76. type : 'value',
  77. position: 'bottom',
  78. splitLine: {show:false},
  79. axisLine: {show:false},
  80. min: -data[name+'Max'],
  81. max: 0,
  82. axisLabel:{
  83. show:false,
  84. formatter: function (v){
  85. return -v;
  86. }
  87. }
  88. }
  89. ],
  90. yAxis : [
  91. {
  92. type : 'category',
  93. splitLine: {show:false},
  94. axisLine: {show:false},
  95. axisLabel : {show:false},
  96. data : nameWorst
  97. },
  98. {
  99. type : 'category',
  100. splitLine: {show:false},
  101. axisLine: {show:false},
  102. axisLabel : {show:false},
  103. data : nameBest
  104. }
  105. ],
  106. animation:false,
  107. series : [
  108. {
  109. name: '空气质量('+name+')',
  110. type: 'map',
  111. mapType: 'china',
  112. itemStyle:{normal:{label:{show:false}}},
  113. //roam: true,
  114. mapLocation: {
  115. x: '45%',
  116. y: 200,
  117. width: '45%'
  118. },
  119. data:[
  120. {name:'西藏', value:data.cityToData['拉萨'][key]},
  121. {name:'青海', value:data.cityToData['西宁'][key]},
  122. {name:'宁夏', value:data.cityToData['银川'][key]},
  123. {name:'海南', value:data.cityToData['海口'][key]},
  124. {name:'甘肃', value:data.cityToData['兰州'][key]},
  125. {name:'贵州', value:data.cityToData['贵阳'][key]},
  126. {name:'新疆', value:data.cityToData['乌鲁木齐'][key]},
  127. {name:'云南', value:data.cityToData['昆明'][key]},
  128. {name:'重庆', value:data.cityToData['重庆'][key]},
  129. {name:'吉林', value:data.cityToData['长春'][key]},
  130. {name:'山西', value:data.cityToData['太原'][key]},
  131. {name:'天津', value:data.cityToData['天津'][key]},
  132. {name:'江西', value:data.cityToData['南昌'][key]},
  133. {name:'广西', value:data.cityToData['南宁'][key]},
  134. {name:'陕西', value:data.cityToData['西安'][key]},
  135. {name:'黑龙江', value:data.cityToData['哈尔滨'][key]},
  136. {name:'内蒙古', value:data.cityToData['呼和浩特'][key]},
  137. {name:'安徽', value:data.cityToData['合肥'][key]},
  138. {name:'北京', value:(data.cityToData['北京'] || {})[key]},
  139. {name:'福建', value:data.cityToData['福州'][key]},
  140. {name:'上海', value:data.cityToData['上海'][key]},
  141. {name:'湖北', value:data.cityToData['武汉'][key]},
  142. {name:'湖南', value:data.cityToData['长沙'][key]},
  143. {name:'四川', value:data.cityToData['成都'][key]},
  144. {name:'辽宁', value:data.cityToData['沈阳'][key]},
  145. {name:'河北', value:data.cityToData['石家庄'][key]},
  146. {name:'河南', value:data.cityToData['郑州'][key]},
  147. {name:'浙江', value:data.cityToData['杭州'][key]},
  148. {name:'山东', value:data.cityToData['济南'][key]},
  149. {name:'江苏', value:data.cityToData['南京'][key]},
  150. {name:'广东', value:data.cityToData['广州'][key]}
  151. ]
  152. },
  153. {
  154. name: '空气质量最差('+name+')',
  155. type: 'bar',
  156. itemStyle : {
  157. normal : {
  158. color : (function (){
  159. var zrColor = require('zrender/tool/color');
  160. return zrColor.getLinearGradient(
  161. 0, 80, 0, 700,
  162. //['orangered','yellow','lightskyblue']
  163. [[0, 'purple'],[0.5, 'orangered'],[1, 'orange']]
  164. )
  165. })(),
  166. label : {
  167. show : true,
  168. position: 'right',
  169. formatter:'{b} : {c}'
  170. }
  171. }
  172. },
  173. data: dataWorst
  174. },
  175. {
  176. name: '空气质量最好('+name+')',
  177. type: 'bar',
  178. tooltip:{
  179. trigger: 'item',
  180. formatter : function (v) {
  181. return v[0] + '<br/>' + v[1] + ' : ' + (-v[2]);
  182. }
  183. },
  184. xAxisIndex:1,
  185. yAxisIndex:1,
  186. barMinHeight: 5,
  187. itemStyle : {
  188. normal : {
  189. color : (function (){
  190. var zrColor = require('zrender/tool/color');
  191. return zrColor.getLinearGradient(
  192. 0, 80, 0, 700,
  193. //['orangered','yellow','lightskyblue']
  194. [[0, 'lightskyblue'],[1, 'lightgreen']]
  195. )
  196. })(),
  197. label : {
  198. show : true,
  199. position: 'left',
  200. formatter: function (params) {
  201. return params.name + ' : ' + (-params.value);
  202. }
  203. }
  204. }
  205. },
  206. data: dataBest
  207. }
  208. ]
  209. };
  210. //console.log(option);
  211. return option;
  212. }