worldPopulationBubble.html 37 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540
  1. <html>
  2. <head>
  3. <meta charset='utf-8'>
  4. <script src='esl.js'></script>
  5. <script src='config.js'></script>
  6. <script src='lib/jquery.min.js'></script>
  7. </head>
  8. <body>
  9. <style>
  10. html, body, #main {
  11. width: 100%;
  12. height: 100%;
  13. margin: 0;
  14. background: #3f3f50;
  15. }
  16. </style>
  17. <div id='main'></div>
  18. <script>
  19. require([
  20. 'echarts',
  21. 'echarts/chart/map',
  22. 'echarts/chart/scatter',
  23. 'echarts/component/legend',
  24. 'echarts/component/geo',
  25. 'echarts/component/visualMap'
  26. ], function (echarts) {
  27. $.get('../map/json/world.json', function (worldJson) {
  28. echarts.registerMap('world', worldJson);
  29. var latlong = {};
  30. latlong['AD'] = {'latitude':42.5, 'longitude':1.5};
  31. latlong['AE'] = {'latitude':24, 'longitude':54};
  32. latlong['AF'] = {'latitude':33, 'longitude':65};
  33. latlong['AG'] = {'latitude':17.05, 'longitude':-61.8};
  34. latlong['AI'] = {'latitude':18.25, 'longitude':-63.1667};
  35. latlong['AL'] = {'latitude':41, 'longitude':20};
  36. latlong['AM'] = {'latitude':40, 'longitude':45};
  37. latlong['AN'] = {'latitude':12.25, 'longitude':-68.75};
  38. latlong['AO'] = {'latitude':-12.5, 'longitude':18.5};
  39. latlong['AP'] = {'latitude':35, 'longitude':105};
  40. latlong['AQ'] = {'latitude':-90, 'longitude':0};
  41. latlong['AR'] = {'latitude':-34, 'longitude':-64};
  42. latlong['AS'] = {'latitude':-14.3333, 'longitude':-170};
  43. latlong['AT'] = {'latitude':47.3333, 'longitude':13.3333};
  44. latlong['AU'] = {'latitude':-27, 'longitude':133};
  45. latlong['AW'] = {'latitude':12.5, 'longitude':-69.9667};
  46. latlong['AZ'] = {'latitude':40.5, 'longitude':47.5};
  47. latlong['BA'] = {'latitude':44, 'longitude':18};
  48. latlong['BB'] = {'latitude':13.1667, 'longitude':-59.5333};
  49. latlong['BD'] = {'latitude':24, 'longitude':90};
  50. latlong['BE'] = {'latitude':50.8333, 'longitude':4};
  51. latlong['BF'] = {'latitude':13, 'longitude':-2};
  52. latlong['BG'] = {'latitude':43, 'longitude':25};
  53. latlong['BH'] = {'latitude':26, 'longitude':50.55};
  54. latlong['BI'] = {'latitude':-3.5, 'longitude':30};
  55. latlong['BJ'] = {'latitude':9.5, 'longitude':2.25};
  56. latlong['BM'] = {'latitude':32.3333, 'longitude':-64.75};
  57. latlong['BN'] = {'latitude':4.5, 'longitude':114.6667};
  58. latlong['BO'] = {'latitude':-17, 'longitude':-65};
  59. latlong['BR'] = {'latitude':-10, 'longitude':-55};
  60. latlong['BS'] = {'latitude':24.25, 'longitude':-76};
  61. latlong['BT'] = {'latitude':27.5, 'longitude':90.5};
  62. latlong['BV'] = {'latitude':-54.4333, 'longitude':3.4};
  63. latlong['BW'] = {'latitude':-22, 'longitude':24};
  64. latlong['BY'] = {'latitude':53, 'longitude':28};
  65. latlong['BZ'] = {'latitude':17.25, 'longitude':-88.75};
  66. latlong['CA'] = {'latitude':54, 'longitude':-100};
  67. latlong['CC'] = {'latitude':-12.5, 'longitude':96.8333};
  68. latlong['CD'] = {'latitude':0, 'longitude':25};
  69. latlong['CF'] = {'latitude':7, 'longitude':21};
  70. latlong['CG'] = {'latitude':-1, 'longitude':15};
  71. latlong['CH'] = {'latitude':47, 'longitude':8};
  72. latlong['CI'] = {'latitude':8, 'longitude':-5};
  73. latlong['CK'] = {'latitude':-21.2333, 'longitude':-159.7667};
  74. latlong['CL'] = {'latitude':-30, 'longitude':-71};
  75. latlong['CM'] = {'latitude':6, 'longitude':12};
  76. latlong['CN'] = {'latitude':35, 'longitude':105};
  77. latlong['CO'] = {'latitude':4, 'longitude':-72};
  78. latlong['CR'] = {'latitude':10, 'longitude':-84};
  79. latlong['CU'] = {'latitude':21.5, 'longitude':-80};
  80. latlong['CV'] = {'latitude':16, 'longitude':-24};
  81. latlong['CX'] = {'latitude':-10.5, 'longitude':105.6667};
  82. latlong['CY'] = {'latitude':35, 'longitude':33};
  83. latlong['CZ'] = {'latitude':49.75, 'longitude':15.5};
  84. latlong['DE'] = {'latitude':51, 'longitude':9};
  85. latlong['DJ'] = {'latitude':11.5, 'longitude':43};
  86. latlong['DK'] = {'latitude':56, 'longitude':10};
  87. latlong['DM'] = {'latitude':15.4167, 'longitude':-61.3333};
  88. latlong['DO'] = {'latitude':19, 'longitude':-70.6667};
  89. latlong['DZ'] = {'latitude':28, 'longitude':3};
  90. latlong['EC'] = {'latitude':-2, 'longitude':-77.5};
  91. latlong['EE'] = {'latitude':59, 'longitude':26};
  92. latlong['EG'] = {'latitude':27, 'longitude':30};
  93. latlong['EH'] = {'latitude':24.5, 'longitude':-13};
  94. latlong['ER'] = {'latitude':15, 'longitude':39};
  95. latlong['ES'] = {'latitude':40, 'longitude':-4};
  96. latlong['ET'] = {'latitude':8, 'longitude':38};
  97. latlong['EU'] = {'latitude':47, 'longitude':8};
  98. latlong['FI'] = {'latitude':62, 'longitude':26};
  99. latlong['FJ'] = {'latitude':-18, 'longitude':175};
  100. latlong['FK'] = {'latitude':-51.75, 'longitude':-59};
  101. latlong['FM'] = {'latitude':6.9167, 'longitude':158.25};
  102. latlong['FO'] = {'latitude':62, 'longitude':-7};
  103. latlong['FR'] = {'latitude':46, 'longitude':2};
  104. latlong['GA'] = {'latitude':-1, 'longitude':11.75};
  105. latlong['GB'] = {'latitude':54, 'longitude':-2};
  106. latlong['GD'] = {'latitude':12.1167, 'longitude':-61.6667};
  107. latlong['GE'] = {'latitude':42, 'longitude':43.5};
  108. latlong['GF'] = {'latitude':4, 'longitude':-53};
  109. latlong['GH'] = {'latitude':8, 'longitude':-2};
  110. latlong['GI'] = {'latitude':36.1833, 'longitude':-5.3667};
  111. latlong['GL'] = {'latitude':72, 'longitude':-40};
  112. latlong['GM'] = {'latitude':13.4667, 'longitude':-16.5667};
  113. latlong['GN'] = {'latitude':11, 'longitude':-10};
  114. latlong['GP'] = {'latitude':16.25, 'longitude':-61.5833};
  115. latlong['GQ'] = {'latitude':2, 'longitude':10};
  116. latlong['GR'] = {'latitude':39, 'longitude':22};
  117. latlong['GS'] = {'latitude':-54.5, 'longitude':-37};
  118. latlong['GT'] = {'latitude':15.5, 'longitude':-90.25};
  119. latlong['GU'] = {'latitude':13.4667, 'longitude':144.7833};
  120. latlong['GW'] = {'latitude':12, 'longitude':-15};
  121. latlong['GY'] = {'latitude':5, 'longitude':-59};
  122. latlong['HK'] = {'latitude':22.25, 'longitude':114.1667};
  123. latlong['HM'] = {'latitude':-53.1, 'longitude':72.5167};
  124. latlong['HN'] = {'latitude':15, 'longitude':-86.5};
  125. latlong['HR'] = {'latitude':45.1667, 'longitude':15.5};
  126. latlong['HT'] = {'latitude':19, 'longitude':-72.4167};
  127. latlong['HU'] = {'latitude':47, 'longitude':20};
  128. latlong['ID'] = {'latitude':-5, 'longitude':120};
  129. latlong['IE'] = {'latitude':53, 'longitude':-8};
  130. latlong['IL'] = {'latitude':31.5, 'longitude':34.75};
  131. latlong['IN'] = {'latitude':20, 'longitude':77};
  132. latlong['IO'] = {'latitude':-6, 'longitude':71.5};
  133. latlong['IQ'] = {'latitude':33, 'longitude':44};
  134. latlong['IR'] = {'latitude':32, 'longitude':53};
  135. latlong['IS'] = {'latitude':65, 'longitude':-18};
  136. latlong['IT'] = {'latitude':42.8333, 'longitude':12.8333};
  137. latlong['JM'] = {'latitude':18.25, 'longitude':-77.5};
  138. latlong['JO'] = {'latitude':31, 'longitude':36};
  139. latlong['JP'] = {'latitude':36, 'longitude':138};
  140. latlong['KE'] = {'latitude':1, 'longitude':38};
  141. latlong['KG'] = {'latitude':41, 'longitude':75};
  142. latlong['KH'] = {'latitude':13, 'longitude':105};
  143. latlong['KI'] = {'latitude':1.4167, 'longitude':173};
  144. latlong['KM'] = {'latitude':-12.1667, 'longitude':44.25};
  145. latlong['KN'] = {'latitude':17.3333, 'longitude':-62.75};
  146. latlong['KP'] = {'latitude':40, 'longitude':127};
  147. latlong['KR'] = {'latitude':37, 'longitude':127.5};
  148. latlong['KW'] = {'latitude':29.3375, 'longitude':47.6581};
  149. latlong['KY'] = {'latitude':19.5, 'longitude':-80.5};
  150. latlong['KZ'] = {'latitude':48, 'longitude':68};
  151. latlong['LA'] = {'latitude':18, 'longitude':105};
  152. latlong['LB'] = {'latitude':33.8333, 'longitude':35.8333};
  153. latlong['LC'] = {'latitude':13.8833, 'longitude':-61.1333};
  154. latlong['LI'] = {'latitude':47.1667, 'longitude':9.5333};
  155. latlong['LK'] = {'latitude':7, 'longitude':81};
  156. latlong['LR'] = {'latitude':6.5, 'longitude':-9.5};
  157. latlong['LS'] = {'latitude':-29.5, 'longitude':28.5};
  158. latlong['LT'] = {'latitude':55, 'longitude':24};
  159. latlong['LU'] = {'latitude':49.75, 'longitude':6};
  160. latlong['LV'] = {'latitude':57, 'longitude':25};
  161. latlong['LY'] = {'latitude':25, 'longitude':17};
  162. latlong['MA'] = {'latitude':32, 'longitude':-5};
  163. latlong['MC'] = {'latitude':43.7333, 'longitude':7.4};
  164. latlong['MD'] = {'latitude':47, 'longitude':29};
  165. latlong['ME'] = {'latitude':42.5, 'longitude':19.4};
  166. latlong['MG'] = {'latitude':-20, 'longitude':47};
  167. latlong['MH'] = {'latitude':9, 'longitude':168};
  168. latlong['MK'] = {'latitude':41.8333, 'longitude':22};
  169. latlong['ML'] = {'latitude':17, 'longitude':-4};
  170. latlong['MM'] = {'latitude':22, 'longitude':98};
  171. latlong['MN'] = {'latitude':46, 'longitude':105};
  172. latlong['MO'] = {'latitude':22.1667, 'longitude':113.55};
  173. latlong['MP'] = {'latitude':15.2, 'longitude':145.75};
  174. latlong['MQ'] = {'latitude':14.6667, 'longitude':-61};
  175. latlong['MR'] = {'latitude':20, 'longitude':-12};
  176. latlong['MS'] = {'latitude':16.75, 'longitude':-62.2};
  177. latlong['MT'] = {'latitude':35.8333, 'longitude':14.5833};
  178. latlong['MU'] = {'latitude':-20.2833, 'longitude':57.55};
  179. latlong['MV'] = {'latitude':3.25, 'longitude':73};
  180. latlong['MW'] = {'latitude':-13.5, 'longitude':34};
  181. latlong['MX'] = {'latitude':23, 'longitude':-102};
  182. latlong['MY'] = {'latitude':2.5, 'longitude':112.5};
  183. latlong['MZ'] = {'latitude':-18.25, 'longitude':35};
  184. latlong['NA'] = {'latitude':-22, 'longitude':17};
  185. latlong['NC'] = {'latitude':-21.5, 'longitude':165.5};
  186. latlong['NE'] = {'latitude':16, 'longitude':8};
  187. latlong['NF'] = {'latitude':-29.0333, 'longitude':167.95};
  188. latlong['NG'] = {'latitude':10, 'longitude':8};
  189. latlong['NI'] = {'latitude':13, 'longitude':-85};
  190. latlong['NL'] = {'latitude':52.5, 'longitude':5.75};
  191. latlong['NO'] = {'latitude':62, 'longitude':10};
  192. latlong['NP'] = {'latitude':28, 'longitude':84};
  193. latlong['NR'] = {'latitude':-0.5333, 'longitude':166.9167};
  194. latlong['NU'] = {'latitude':-19.0333, 'longitude':-169.8667};
  195. latlong['NZ'] = {'latitude':-41, 'longitude':174};
  196. latlong['OM'] = {'latitude':21, 'longitude':57};
  197. latlong['PA'] = {'latitude':9, 'longitude':-80};
  198. latlong['PE'] = {'latitude':-10, 'longitude':-76};
  199. latlong['PF'] = {'latitude':-15, 'longitude':-140};
  200. latlong['PG'] = {'latitude':-6, 'longitude':147};
  201. latlong['PH'] = {'latitude':13, 'longitude':122};
  202. latlong['PK'] = {'latitude':30, 'longitude':70};
  203. latlong['PL'] = {'latitude':52, 'longitude':20};
  204. latlong['PM'] = {'latitude':46.8333, 'longitude':-56.3333};
  205. latlong['PR'] = {'latitude':18.25, 'longitude':-66.5};
  206. latlong['PS'] = {'latitude':32, 'longitude':35.25};
  207. latlong['PT'] = {'latitude':39.5, 'longitude':-8};
  208. latlong['PW'] = {'latitude':7.5, 'longitude':134.5};
  209. latlong['PY'] = {'latitude':-23, 'longitude':-58};
  210. latlong['QA'] = {'latitude':25.5, 'longitude':51.25};
  211. latlong['RE'] = {'latitude':-21.1, 'longitude':55.6};
  212. latlong['RO'] = {'latitude':46, 'longitude':25};
  213. latlong['RS'] = {'latitude':44, 'longitude':21};
  214. latlong['RU'] = {'latitude':60, 'longitude':100};
  215. latlong['RW'] = {'latitude':-2, 'longitude':30};
  216. latlong['SA'] = {'latitude':25, 'longitude':45};
  217. latlong['SB'] = {'latitude':-8, 'longitude':159};
  218. latlong['SC'] = {'latitude':-4.5833, 'longitude':55.6667};
  219. latlong['SD'] = {'latitude':15, 'longitude':30};
  220. latlong['SE'] = {'latitude':62, 'longitude':15};
  221. latlong['SG'] = {'latitude':1.3667, 'longitude':103.8};
  222. latlong['SH'] = {'latitude':-15.9333, 'longitude':-5.7};
  223. latlong['SI'] = {'latitude':46, 'longitude':15};
  224. latlong['SJ'] = {'latitude':78, 'longitude':20};
  225. latlong['SK'] = {'latitude':48.6667, 'longitude':19.5};
  226. latlong['SL'] = {'latitude':8.5, 'longitude':-11.5};
  227. latlong['SM'] = {'latitude':43.7667, 'longitude':12.4167};
  228. latlong['SN'] = {'latitude':14, 'longitude':-14};
  229. latlong['SO'] = {'latitude':10, 'longitude':49};
  230. latlong['SR'] = {'latitude':4, 'longitude':-56};
  231. latlong['ST'] = {'latitude':1, 'longitude':7};
  232. latlong['SV'] = {'latitude':13.8333, 'longitude':-88.9167};
  233. latlong['SY'] = {'latitude':35, 'longitude':38};
  234. latlong['SZ'] = {'latitude':-26.5, 'longitude':31.5};
  235. latlong['TC'] = {'latitude':21.75, 'longitude':-71.5833};
  236. latlong['TD'] = {'latitude':15, 'longitude':19};
  237. latlong['TF'] = {'latitude':-43, 'longitude':67};
  238. latlong['TG'] = {'latitude':8, 'longitude':1.1667};
  239. latlong['TH'] = {'latitude':15, 'longitude':100};
  240. latlong['TJ'] = {'latitude':39, 'longitude':71};
  241. latlong['TK'] = {'latitude':-9, 'longitude':-172};
  242. latlong['TM'] = {'latitude':40, 'longitude':60};
  243. latlong['TN'] = {'latitude':34, 'longitude':9};
  244. latlong['TO'] = {'latitude':-20, 'longitude':-175};
  245. latlong['TR'] = {'latitude':39, 'longitude':35};
  246. latlong['TT'] = {'latitude':11, 'longitude':-61};
  247. latlong['TV'] = {'latitude':-8, 'longitude':178};
  248. latlong['TW'] = {'latitude':23.5, 'longitude':121};
  249. latlong['TZ'] = {'latitude':-6, 'longitude':35};
  250. latlong['UA'] = {'latitude':49, 'longitude':32};
  251. latlong['UG'] = {'latitude':1, 'longitude':32};
  252. latlong['UM'] = {'latitude':19.2833, 'longitude':166.6};
  253. latlong['US'] = {'latitude':38, 'longitude':-97};
  254. latlong['UY'] = {'latitude':-33, 'longitude':-56};
  255. latlong['UZ'] = {'latitude':41, 'longitude':64};
  256. latlong['VA'] = {'latitude':41.9, 'longitude':12.45};
  257. latlong['VC'] = {'latitude':13.25, 'longitude':-61.2};
  258. latlong['VE'] = {'latitude':8, 'longitude':-66};
  259. latlong['VG'] = {'latitude':18.5, 'longitude':-64.5};
  260. latlong['VI'] = {'latitude':18.3333, 'longitude':-64.8333};
  261. latlong['VN'] = {'latitude':16, 'longitude':106};
  262. latlong['VU'] = {'latitude':-16, 'longitude':167};
  263. latlong['WF'] = {'latitude':-13.3, 'longitude':-176.2};
  264. latlong['WS'] = {'latitude':-13.5833, 'longitude':-172.3333};
  265. latlong['YE'] = {'latitude':15, 'longitude':48};
  266. latlong['YT'] = {'latitude':-12.8333, 'longitude':45.1667};
  267. latlong['ZA'] = {'latitude':-29, 'longitude':24};
  268. latlong['ZM'] = {'latitude':-15, 'longitude':30};
  269. latlong['ZW'] = {'latitude':-20, 'longitude':30};
  270. var mapData = [
  271. {'code':'AF' , 'name':'Afghanistan', 'value':32358260, 'color':'#eea638'},
  272. {'code':'AL' , 'name':'Albania', 'value':3215988, 'color':'#d8854f'},
  273. {'code':'DZ' , 'name':'Algeria', 'value':35980193, 'color':'#de4c4f'},
  274. {'code':'AO' , 'name':'Angola', 'value':19618432, 'color':'#de4c4f'},
  275. {'code':'AR' , 'name':'Argentina', 'value':40764561, 'color':'#86a965'},
  276. {'code':'AM' , 'name':'Armenia', 'value':3100236, 'color':'#d8854f'},
  277. {'code':'AU' , 'name':'Australia', 'value':22605732, 'color':'#8aabb0'},
  278. {'code':'AT' , 'name':'Austria', 'value':8413429, 'color':'#d8854f'},
  279. {'code':'AZ' , 'name':'Azerbaijan', 'value':9306023, 'color':'#d8854f'},
  280. {'code':'BH' , 'name':'Bahrain', 'value':1323535, 'color':'#eea638'},
  281. {'code':'BD' , 'name':'Bangladesh', 'value':150493658, 'color':'#eea638'},
  282. {'code':'BY' , 'name':'Belarus', 'value':9559441, 'color':'#d8854f'},
  283. {'code':'BE' , 'name':'Belgium', 'value':10754056, 'color':'#d8854f'},
  284. {'code':'BJ' , 'name':'Benin', 'value':9099922, 'color':'#de4c4f'},
  285. {'code':'BT' , 'name':'Bhutan', 'value':738267, 'color':'#eea638'},
  286. {'code':'BO' , 'name':'Bolivia', 'value':10088108, 'color':'#86a965'},
  287. {'code':'BA' , 'name':'Bosnia and Herzegovina', 'value':3752228, 'color':'#d8854f'},
  288. {'code':'BW' , 'name':'Botswana', 'value':2030738, 'color':'#de4c4f'},
  289. {'code':'BR' , 'name':'Brazil', 'value':196655014, 'color':'#86a965'},
  290. {'code':'BN' , 'name':'Brunei', 'value':405938, 'color':'#eea638'},
  291. {'code':'BG' , 'name':'Bulgaria', 'value':7446135, 'color':'#d8854f'},
  292. {'code':'BF' , 'name':'Burkina Faso', 'value':16967845, 'color':'#de4c4f'},
  293. {'code':'BI' , 'name':'Burundi', 'value':8575172, 'color':'#de4c4f'},
  294. {'code':'KH' , 'name':'Cambodia', 'value':14305183, 'color':'#eea638'},
  295. {'code':'CM' , 'name':'Cameroon', 'value':20030362, 'color':'#de4c4f'},
  296. {'code':'CA' , 'name':'Canada', 'value':34349561, 'color':'#a7a737'},
  297. {'code':'CV' , 'name':'Cape Verde', 'value':500585, 'color':'#de4c4f'},
  298. {'code':'CF' , 'name':'Central African Rep.', 'value':4486837, 'color':'#de4c4f'},
  299. {'code':'TD' , 'name':'Chad', 'value':11525496, 'color':'#de4c4f'},
  300. {'code':'CL' , 'name':'Chile', 'value':17269525, 'color':'#86a965'},
  301. {'code':'CN' , 'name':'China', 'value':1347565324, 'color':'#eea638'},
  302. {'code':'CO' , 'name':'Colombia', 'value':46927125, 'color':'#86a965'},
  303. {'code':'KM' , 'name':'Comoros', 'value':753943, 'color':'#de4c4f'},
  304. {'code':'CD' , 'name':'Congo, Dem. Rep.', 'value':67757577, 'color':'#de4c4f'},
  305. {'code':'CG' , 'name':'Congo, Rep.', 'value':4139748, 'color':'#de4c4f'},
  306. {'code':'CR' , 'name':'Costa Rica', 'value':4726575, 'color':'#a7a737'},
  307. {'code':'CI' , 'name':'Cote d\'Ivoire', 'value':20152894, 'color':'#de4c4f'},
  308. {'code':'HR' , 'name':'Croatia', 'value':4395560, 'color':'#d8854f'},
  309. {'code':'CU' , 'name':'Cuba', 'value':11253665, 'color':'#a7a737'},
  310. {'code':'CY' , 'name':'Cyprus', 'value':1116564, 'color':'#d8854f'},
  311. {'code':'CZ' , 'name':'Czech Rep.', 'value':10534293, 'color':'#d8854f'},
  312. {'code':'DK' , 'name':'Denmark', 'value':5572594, 'color':'#d8854f'},
  313. {'code':'DJ' , 'name':'Djibouti', 'value':905564, 'color':'#de4c4f'},
  314. {'code':'DO' , 'name':'Dominican Rep.', 'value':10056181, 'color':'#a7a737'},
  315. {'code':'EC' , 'name':'Ecuador', 'value':14666055, 'color':'#86a965'},
  316. {'code':'EG' , 'name':'Egypt', 'value':82536770, 'color':'#de4c4f'},
  317. {'code':'SV' , 'name':'El Salvador', 'value':6227491, 'color':'#a7a737'},
  318. {'code':'GQ' , 'name':'Equatorial Guinea', 'value':720213, 'color':'#de4c4f'},
  319. {'code':'ER' , 'name':'Eritrea', 'value':5415280, 'color':'#de4c4f'},
  320. {'code':'EE' , 'name':'Estonia', 'value':1340537, 'color':'#d8854f'},
  321. {'code':'ET' , 'name':'Ethiopia', 'value':84734262, 'color':'#de4c4f'},
  322. {'code':'FJ' , 'name':'Fiji', 'value':868406, 'color':'#8aabb0'},
  323. {'code':'FI' , 'name':'Finland', 'value':5384770, 'color':'#d8854f'},
  324. {'code':'FR' , 'name':'France', 'value':63125894, 'color':'#d8854f'},
  325. {'code':'GA' , 'name':'Gabon', 'value':1534262, 'color':'#de4c4f'},
  326. {'code':'GM' , 'name':'Gambia', 'value':1776103, 'color':'#de4c4f'},
  327. {'code':'GE' , 'name':'Georgia', 'value':4329026, 'color':'#d8854f'},
  328. {'code':'DE' , 'name':'Germany', 'value':82162512, 'color':'#d8854f'},
  329. {'code':'GH' , 'name':'Ghana', 'value':24965816, 'color':'#de4c4f'},
  330. {'code':'GR' , 'name':'Greece', 'value':11390031, 'color':'#d8854f'},
  331. {'code':'GT' , 'name':'Guatemala', 'value':14757316, 'color':'#a7a737'},
  332. {'code':'GN' , 'name':'Guinea', 'value':10221808, 'color':'#de4c4f'},
  333. {'code':'GW' , 'name':'Guinea-Bissau', 'value':1547061, 'color':'#de4c4f'},
  334. {'code':'GY' , 'name':'Guyana', 'value':756040, 'color':'#86a965'},
  335. {'code':'HT' , 'name':'Haiti', 'value':10123787, 'color':'#a7a737'},
  336. {'code':'HN' , 'name':'Honduras', 'value':7754687, 'color':'#a7a737'},
  337. {'code':'HK' , 'name':'Hong Kong, China', 'value':7122187, 'color':'#eea638'},
  338. {'code':'HU' , 'name':'Hungary', 'value':9966116, 'color':'#d8854f'},
  339. {'code':'IS' , 'name':'Iceland', 'value':324366, 'color':'#d8854f'},
  340. {'code':'IN' , 'name':'India', 'value':1241491960, 'color':'#eea638'},
  341. {'code':'ID' , 'name':'Indonesia', 'value':242325638, 'color':'#eea638'},
  342. {'code':'IR' , 'name':'Iran', 'value':74798599, 'color':'#eea638'},
  343. {'code':'IQ' , 'name':'Iraq', 'value':32664942, 'color':'#eea638'},
  344. {'code':'IE' , 'name':'Ireland', 'value':4525802, 'color':'#d8854f'},
  345. {'code':'IL' , 'name':'Israel', 'value':7562194, 'color':'#eea638'},
  346. {'code':'IT' , 'name':'Italy', 'value':60788694, 'color':'#d8854f'},
  347. {'code':'JM' , 'name':'Jamaica', 'value':2751273, 'color':'#a7a737'},
  348. {'code':'JP' , 'name':'Japan', 'value':126497241, 'color':'#eea638'},
  349. {'code':'JO' , 'name':'Jordan', 'value':6330169, 'color':'#eea638'},
  350. {'code':'KZ' , 'name':'Kazakhstan', 'value':16206750, 'color':'#eea638'},
  351. {'code':'KE' , 'name':'Kenya', 'value':41609728, 'color':'#de4c4f'},
  352. {'code':'KP' , 'name':'Korea, Dem. Rep.', 'value':24451285, 'color':'#eea638'},
  353. {'code':'KR' , 'name':'Korea, Rep.', 'value':48391343, 'color':'#eea638'},
  354. {'code':'KW' , 'name':'Kuwait', 'value':2818042, 'color':'#eea638'},
  355. {'code':'KG' , 'name':'Kyrgyzstan', 'value':5392580, 'color':'#eea638'},
  356. {'code':'LA' , 'name':'Laos', 'value':6288037, 'color':'#eea638'},
  357. {'code':'LV' , 'name':'Latvia', 'value':2243142, 'color':'#d8854f'},
  358. {'code':'LB' , 'name':'Lebanon', 'value':4259405, 'color':'#eea638'},
  359. {'code':'LS' , 'name':'Lesotho', 'value':2193843, 'color':'#de4c4f'},
  360. {'code':'LR' , 'name':'Liberia', 'value':4128572, 'color':'#de4c4f'},
  361. {'code':'LY' , 'name':'Libya', 'value':6422772, 'color':'#de4c4f'},
  362. {'code':'LT' , 'name':'Lithuania', 'value':3307481, 'color':'#d8854f'},
  363. {'code':'LU' , 'name':'Luxembourg', 'value':515941, 'color':'#d8854f'},
  364. {'code':'MK' , 'name':'Macedonia, FYR', 'value':2063893, 'color':'#d8854f'},
  365. {'code':'MG' , 'name':'Madagascar', 'value':21315135, 'color':'#de4c4f'},
  366. {'code':'MW' , 'name':'Malawi', 'value':15380888, 'color':'#de4c4f'},
  367. {'code':'MY' , 'name':'Malaysia', 'value':28859154, 'color':'#eea638'},
  368. {'code':'ML' , 'name':'Mali', 'value':15839538, 'color':'#de4c4f'},
  369. {'code':'MR' , 'name':'Mauritania', 'value':3541540, 'color':'#de4c4f'},
  370. {'code':'MU' , 'name':'Mauritius', 'value':1306593, 'color':'#de4c4f'},
  371. {'code':'MX' , 'name':'Mexico', 'value':114793341, 'color':'#a7a737'},
  372. {'code':'MD' , 'name':'Moldova', 'value':3544864, 'color':'#d8854f'},
  373. {'code':'MN' , 'name':'Mongolia', 'value':2800114, 'color':'#eea638'},
  374. {'code':'ME' , 'name':'Montenegro', 'value':632261, 'color':'#d8854f'},
  375. {'code':'MA' , 'name':'Morocco', 'value':32272974, 'color':'#de4c4f'},
  376. {'code':'MZ' , 'name':'Mozambique', 'value':23929708, 'color':'#de4c4f'},
  377. {'code':'MM' , 'name':'Myanmar', 'value':48336763, 'color':'#eea638'},
  378. {'code':'NA' , 'name':'Namibia', 'value':2324004, 'color':'#de4c4f'},
  379. {'code':'NP' , 'name':'Nepal', 'value':30485798, 'color':'#eea638'},
  380. {'code':'NL' , 'name':'Netherlands', 'value':16664746, 'color':'#d8854f'},
  381. {'code':'NZ' , 'name':'New Zealand', 'value':4414509, 'color':'#8aabb0'},
  382. {'code':'NI' , 'name':'Nicaragua', 'value':5869859, 'color':'#a7a737'},
  383. {'code':'NE' , 'name':'Niger', 'value':16068994, 'color':'#de4c4f'},
  384. {'code':'NG' , 'name':'Nigeria', 'value':162470737, 'color':'#de4c4f'},
  385. {'code':'NO' , 'name':'Norway', 'value':4924848, 'color':'#d8854f'},
  386. {'code':'OM' , 'name':'Oman', 'value':2846145, 'color':'#eea638'},
  387. {'code':'PK' , 'name':'Pakistan', 'value':176745364, 'color':'#eea638'},
  388. {'code':'PA' , 'name':'Panama', 'value':3571185, 'color':'#a7a737'},
  389. {'code':'PG' , 'name':'Papua New Guinea', 'value':7013829, 'color':'#8aabb0'},
  390. {'code':'PY' , 'name':'Paraguay', 'value':6568290, 'color':'#86a965'},
  391. {'code':'PE' , 'name':'Peru', 'value':29399817, 'color':'#86a965'},
  392. {'code':'PH' , 'name':'Philippines', 'value':94852030, 'color':'#eea638'},
  393. {'code':'PL' , 'name':'Poland', 'value':38298949, 'color':'#d8854f'},
  394. {'code':'PT' , 'name':'Portugal', 'value':10689663, 'color':'#d8854f'},
  395. {'code':'PR' , 'name':'Puerto Rico', 'value':3745526, 'color':'#a7a737'},
  396. {'code':'QA' , 'name':'Qatar', 'value':1870041, 'color':'#eea638'},
  397. {'code':'RO' , 'name':'Romania', 'value':21436495, 'color':'#d8854f'},
  398. {'code':'RU' , 'name':'Russia', 'value':142835555, 'color':'#d8854f'},
  399. {'code':'RW' , 'name':'Rwanda', 'value':10942950, 'color':'#de4c4f'},
  400. {'code':'SA' , 'name':'Saudi Arabia', 'value':28082541, 'color':'#eea638'},
  401. {'code':'SN' , 'name':'Senegal', 'value':12767556, 'color':'#de4c4f'},
  402. {'code':'RS' , 'name':'Serbia', 'value':9853969, 'color':'#d8854f'},
  403. {'code':'SL' , 'name':'Sierra Leone', 'value':5997486, 'color':'#de4c4f'},
  404. {'code':'SG' , 'name':'Singapore', 'value':5187933, 'color':'#eea638'},
  405. {'code':'SK' , 'name':'Slovak Republic', 'value':5471502, 'color':'#d8854f'},
  406. {'code':'SI' , 'name':'Slovenia', 'value':2035012, 'color':'#d8854f'},
  407. {'code':'SB' , 'name':'Solomon Islands', 'value':552267, 'color':'#8aabb0'},
  408. {'code':'SO' , 'name':'Somalia', 'value':9556873, 'color':'#de4c4f'},
  409. {'code':'ZA' , 'name':'South Africa', 'value':50459978, 'color':'#de4c4f'},
  410. {'code':'ES' , 'name':'Spain', 'value':46454895, 'color':'#d8854f'},
  411. {'code':'LK' , 'name':'Sri Lanka', 'value':21045394, 'color':'#eea638'},
  412. {'code':'SD' , 'name':'Sudan', 'value':34735288, 'color':'#de4c4f'},
  413. {'code':'SR' , 'name':'Suriname', 'value':529419, 'color':'#86a965'},
  414. {'code':'SZ' , 'name':'Swaziland', 'value':1203330, 'color':'#de4c4f'},
  415. {'code':'SE' , 'name':'Sweden', 'value':9440747, 'color':'#d8854f'},
  416. {'code':'CH' , 'name':'Switzerland', 'value':7701690, 'color':'#d8854f'},
  417. {'code':'SY' , 'name':'Syria', 'value':20766037, 'color':'#eea638'},
  418. {'code':'TW' , 'name':'Taiwan', 'value':23072000, 'color':'#eea638'},
  419. {'code':'TJ' , 'name':'Tajikistan', 'value':6976958, 'color':'#eea638'},
  420. {'code':'TZ' , 'name':'Tanzania', 'value':46218486, 'color':'#de4c4f'},
  421. {'code':'TH' , 'name':'Thailand', 'value':69518555, 'color':'#eea638'},
  422. {'code':'TG' , 'name':'Togo', 'value':6154813, 'color':'#de4c4f'},
  423. {'code':'TT' , 'name':'Trinidad and Tobago', 'value':1346350, 'color':'#a7a737'},
  424. {'code':'TN' , 'name':'Tunisia', 'value':10594057, 'color':'#de4c4f'},
  425. {'code':'TR' , 'name':'Turkey', 'value':73639596, 'color':'#d8854f'},
  426. {'code':'TM' , 'name':'Turkmenistan', 'value':5105301, 'color':'#eea638'},
  427. {'code':'UG' , 'name':'Uganda', 'value':34509205, 'color':'#de4c4f'},
  428. {'code':'UA' , 'name':'Ukraine', 'value':45190180, 'color':'#d8854f'},
  429. {'code':'AE' , 'name':'United Arab Emirates', 'value':7890924, 'color':'#eea638'},
  430. {'code':'GB' , 'name':'United Kingdom', 'value':62417431, 'color':'#d8854f'},
  431. {'code':'US' , 'name':'United States', 'value':313085380, 'color':'#a7a737'},
  432. {'code':'UY' , 'name':'Uruguay', 'value':3380008, 'color':'#86a965'},
  433. {'code':'UZ' , 'name':'Uzbekistan', 'value':27760267, 'color':'#eea638'},
  434. {'code':'VE' , 'name':'Venezuela', 'value':29436891, 'color':'#86a965'},
  435. {'code':'PS' , 'name':'West Bank and Gaza', 'value':4152369, 'color':'#eea638'},
  436. {'code':'VN' , 'name':'Vietnam', 'value':88791996, 'color':'#eea638'},
  437. {'code':'YE' , 'name':'Yemen, Rep.', 'value':24799880, 'color':'#eea638'},
  438. {'code':'ZM' , 'name':'Zambia', 'value':13474959, 'color':'#de4c4f'},
  439. {'code':'ZW' , 'name':'Zimbabwe', 'value':12754378, 'color':'#de4c4f'}];
  440. var chart = echarts.init(document.getElementById('main'), null, {
  441. renderer: 'canvas'
  442. });
  443. var max = -Infinity;
  444. var min = Infinity;
  445. mapData.forEach(function (itemOpt) {
  446. if (itemOpt.value > max) {
  447. max = itemOpt.value;
  448. }
  449. if (itemOpt.value < min) {
  450. min = itemOpt.value;
  451. }
  452. });
  453. console.profile('setOption');
  454. chart.setOption({
  455. title : {
  456. text: 'World Population (2011)',
  457. subtext: 'From Gapminder',
  458. x:'center',
  459. y:'top'
  460. },
  461. tooltip : {
  462. trigger: 'item',
  463. formatter : function (params) {
  464. var value = (params.value + '').split('.');
  465. value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,')
  466. + '.' + value[1];
  467. return params.seriesName + '<br/>' + params.name + ' : ' + value;
  468. }
  469. },
  470. visualMap: {
  471. show: false,
  472. min: 0,
  473. max: max,
  474. inRange: {
  475. symbolSize: [6, 100]
  476. }
  477. },
  478. geo: {
  479. name: 'World Population (2010)',
  480. type: 'map',
  481. map: 'world',
  482. roam: true,
  483. label: {
  484. emphasis: {
  485. show: false
  486. }
  487. },
  488. itemStyle: {
  489. normal: {
  490. areaColor: '#393948',
  491. borderColor: '#111'
  492. },
  493. emphasis: {
  494. areaColor: '#393948'
  495. }
  496. }
  497. },
  498. series : [
  499. {
  500. type: 'scatter',
  501. coordinateSystem: 'geo',
  502. data: mapData.map(function (itemOpt) {
  503. return {
  504. name: itemOpt.name,
  505. value: [
  506. latlong[itemOpt.code].longitude,
  507. latlong[itemOpt.code].latitude,
  508. itemOpt.value
  509. ],
  510. label: {
  511. emphasis: {
  512. position: 'right',
  513. show: true
  514. }
  515. },
  516. itemStyle: {
  517. normal: {
  518. color: itemOpt.color
  519. }
  520. }
  521. };
  522. })
  523. }
  524. ]
  525. });
  526. console.profileEnd('setOption');
  527. });
  528. });
  529. </script>
  530. </body>
  531. </html>