option1.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. function option1 (name) {
  2. var keyCity = [
  3. /*
  4. '北京','上海','广州','长春','长沙','成都','福州','哈尔滨','沈阳','杭州','呼和浩特',
  5. '昆明','南京','贵阳','太原','天津','武汉','西安','郑州','重庆','济南',
  6. '银川','石家庄','乌鲁木齐','南昌','海口','兰州','西宁','合肥','南宁','深圳',
  7. '包头','大连','大同','保定','东莞','佛山','桂林','开封','连云港',
  8. '廊坊','宁波','齐齐哈尔','泉州','绍兴','苏州','唐山','无锡','延安',
  9. '扬州','徐州','烟台','宜宾','玉溪','湛江','中山','珠海','淄博',
  10. '威海','潍坊','温州','汕头','青岛','厦门','九江','秦皇岛','洛阳',
  11. */
  12. '北京','上海','广州','重庆','天津','太原','沈阳','大连','长春',
  13. '南京','杭州','宁波','合肥','福州','厦门','南昌','济南','青岛',
  14. '郑州','武汉','长沙','深圳','南宁','海口','成都','贵阳','昆明',
  15. '拉萨','西安','兰州','西宁','银川','哈尔滨','石家庄','呼和浩特','乌鲁木齐'
  16. ];
  17. var option = {
  18. title : {
  19. text: '重点城市对比',
  20. subtext: 'data from PM25.in',
  21. sublink: 'http://www.pm25.in',
  22. x:'right',
  23. y:'bottom'
  24. },
  25. tooltip : {
  26. trigger: 'axis',
  27. formatter: function (v) {
  28. var res = v[0][1] + '<br/>';
  29. if (v.length < 5) {
  30. for (var i = 0, l = v.length; i < l; i++) {
  31. res += v[i][0] + ' : ' + v[i][2] + '<br/>';
  32. }
  33. }
  34. else {
  35. for (var i = 0, l = v.length; i < l; i++) {
  36. res += v[i][0] + ' : ' + v[i][2] + ((i + 1) % 3 == 0 ? '<br/>' : ' ');
  37. }
  38. }
  39. return res;
  40. }
  41. },
  42. legend: {
  43. data: keyCity
  44. },
  45. toolbox: {
  46. show : true,
  47. orient : 'vertical',
  48. x: 'right',
  49. y: 'center',
  50. feature : {
  51. mark : {show: true},
  52. dataView : {show: true, readOnly: false},
  53. magicType : {show: true, type: ['line', 'bar']},
  54. restore : {show: true},
  55. saveAsImage : {show: true}
  56. }
  57. },
  58. grid:{
  59. x: 50,
  60. y: 80,
  61. x2: '32%',
  62. borderWidth:0
  63. },
  64. xAxis : [
  65. {
  66. type : 'category',
  67. splitLine : {show : false},
  68. data : ['AQI','PM2.5','PM10','NO2','O3','SO2']
  69. }
  70. ],
  71. yAxis : [
  72. {
  73. type : 'value',
  74. splitArea : {show : true},
  75. splitLine : {show : true}
  76. }
  77. ],
  78. polar : [
  79. {
  80. indicator : [
  81. { text: 'AQI'},
  82. { text: 'PM2.5'},
  83. { text: 'PM10'},
  84. { text: 'NO2'},
  85. { text: 'O3'},
  86. { text: 'SO2'}
  87. ],
  88. center : ['84%', 230],
  89. radius : 120
  90. }
  91. ]
  92. };
  93. var selected = {};
  94. var series = [
  95. {
  96. name: '对比',
  97. type: 'radar',
  98. tooltip: {
  99. trigger:'axis',
  100. formatter: function (v) {
  101. var res = v[0][3] + '<br/>';
  102. if (v.length < 5) {
  103. for (var i = 0, l = v.length; i < l; i++) {
  104. res += v[i][1] + ' : ' + v[i][2] + '<br/>';
  105. }
  106. }
  107. else {
  108. for (var i = 0, l = v.length; i < l; i++) {
  109. res += v[i][1] + ' : ' + v[i][2] + ((i + 1) % 3 == 0 ? '<br/>' : ' ');
  110. }
  111. }
  112. return res;
  113. }
  114. },
  115. itemStyle: {
  116. normal: {
  117. lineStyle: {
  118. width: 1
  119. }
  120. }
  121. },
  122. data: []
  123. }
  124. ];
  125. var cityToData = data.cityToData;
  126. var singleData;
  127. var city;
  128. var seriesData;
  129. for (var i = 0, l = keyCity.length; i < l; i++) {
  130. city = keyCity[i];
  131. singleData = cityToData[city];
  132. if (typeof singleData == 'undefined') {
  133. continue;
  134. }
  135. seriesData = [
  136. singleData.aqi,
  137. singleData.pm2_5,
  138. singleData.pm10,
  139. singleData.no2,
  140. singleData.o3,
  141. singleData.so2
  142. ];
  143. series[0].data.push({
  144. name: city,
  145. value: seriesData
  146. });
  147. series.push({
  148. name: city,
  149. type: 'bar',
  150. barGap:'5%',
  151. barCategoryGap:'10%',
  152. data: seriesData
  153. });
  154. selected[city] = false;
  155. }
  156. selected['北京'] = true;
  157. selected['上海'] = true;
  158. selected['广州'] = true;
  159. //selected['重庆'] = true;
  160. //selected['哈尔滨'] = true;
  161. //selected['乌鲁木齐'] = true;
  162. //selected['拉萨'] = true;
  163. option.legend.selected = selected;
  164. option.series = series;
  165. //console.log(option);
  166. return option;
  167. }